Initial Commit

2025-06-06 17:31:03 +08:00
parent 787a7b5741
commit 66cd489ea8
244 changed files with 13574 additions and 0 deletions
--- a/animation/loading.css
+++ b/animation/loading.css
@@ -0,0 +1,69 @@
+body {
+    margin: 0;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+/* position */
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+.item {
+    height: 50px;
+    width: 5px;
+    background: #0099CC; /* Blue color for .item elements */
+    margin: 0 3px;
+    border-radius: 10px;
+    animation: loading 1s infinite;
+}
+
+/* animation */
+@keyframes loading {
+    0% {
+        height: 0px;
+    }
+
+    50% {
+        height: 50px;
+    }
+
+    100% {
+        height: 0px;
+    }
+}
+
+/* delay */
+.item:nth-child(2) {
+    animation-delay: 0.1s;
+}
+
+.item:nth-child(3) {
+    animation-delay: 0.2s;
+}
+
+.item:nth-child(4) {
+    animation-delay: 0.3s;
+}
+
+.item:nth-child(5) {
+    animation-delay: 0.4s;
+}
+
+.item:nth-child(6) {
+    animation-delay: 0.5s;
+}
+
+.item:nth-child(7) {
+    animation-delay: 0.6s;
+}
+
+.item:nth-child(8) {
+    animation-delay: 0.7s;
+}
--- a/animation/loading.html
+++ b/animation/loading.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./loading.css" type="text/css" />
+    <script>
+        function simulatePageLoad() {
+            var progressBar = document.querySelector('.loading');
+            var progress = 0;
+            var interval = setInterval(function () {
+                progress += 10;
+                if (progress <= 100) {
+                    progressBar.style.setProperty('--progress', progress + '%');
+                } else {
+                    clearInterval(interval);
+                }
+            }, 500);
+        }
+    </script>
+</head>
+
+<body onload="simulatePageLoad()">
+    <div class="loading">
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+</body>
+</html>