From 73b80817331952369e79d3ea7fe38b7328ad7b5e Mon Sep 17 00:00:00 2001 From: lostelk Date: Fri, 28 Mar 2025 15:21:52 +0800 Subject: [PATCH] =?UTF-8?q?refactor(index.html):=20:recycle:=20=E9=A6=96?= =?UTF-8?q?=E5=B1=8F=E5=8A=A0=E8=BD=BDloading=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 73 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 54 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index bd224a67..97513ab2 100644 --- a/index.html +++ b/index.html @@ -17,7 +17,13 @@
-
+
+ +
@@ -34,27 +40,56 @@ height: 100%; } - .loader { - --d: 22px; - - width: 4px; - height: 4px; - color: #25b09b; - border-radius: 50%; - box-shadow: - calc(1 * var(--d)) calc(0 * var(--d)) 0 0, - calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px, - calc(0 * var(--d)) calc(1 * var(--d)) 0 2px, - calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px, - calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px, - calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px, - calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px; - animation: l27 1s infinite steps(8); + .loading-container { + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + justify-content: center; } - @keyframes l27 { + .loading-spinner { + display: flex; + gap: 6px; + align-items: center; + justify-content: center; + height: 40px; + } + + .loading-bar { + width: 4px; + height: 24px; + background-color: #498cff; + border-radius: 2px; + animation: loading-animation 1.2s ease-in-out infinite; + } + + .loading-bar:nth-child(1) { + animation-delay: 0s; + } + + .loading-bar:nth-child(2) { + animation-delay: 0.2s; + } + + .loading-bar:nth-child(3) { + animation-delay: 0.4s; + } + + @keyframes loading-animation { + 0% { + opacity: 0.3; + transform: scaleY(0.5); + } + + 50% { + opacity: 1; + transform: scaleY(1.2); + } + 100% { - transform: rotate(1turn); + opacity: 0.3; + transform: scaleY(0.5); } }