From 845f77da6f769caee122eef4fc929051057499ee Mon Sep 17 00:00:00 2001
From: "YUN-PC5\\user" <bmdzh11713@163.com>
Date: Wed, 11 Oct 2023 16:59:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=8A=A0=E8=BD=BD=E5=8A=A8?=
 =?UTF-8?q?=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index c701db4..5320701 100644
--- a/index.html
+++ b/index.html
@@ -133,15 +133,32 @@
     }
     /* HTML: <div class="loader"></div> */
     .loader {
-      width: 120px;
-      height: 20px;
-      background:
-        linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat
-        lightblue;
-      animation: l2 1s infinite linear;
+      width: 50px;
+      aspect-ratio: 1;
+      display: grid;
     }
-    @keyframes l2 {
-      100% {background-position: right -50px top 0}
+    .loader::before,
+    .loader::after {
+      content:"";
+      grid-area: 1/1;
+      --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000);
+      background:
+        var(--c) 50%  0,
+        var(--c) 50%  100%,
+        var(--c) 100% 50%,
+        var(--c) 0    50%;
+      background-size: 12px 12px;
+      animation: l12 1s infinite;
+    }
+    .loader::before {
+      margin: 4px;
+      filter: hue-rotate(45deg);
+      background-size: 8px 8px;
+      animation-timing-function: linear
+    }
+
+    @keyframes l12 {
+      100%{transform: rotate(.5turn)}
     }
   </style>
 </head>