修改加载动画

index.html

@@ -133,15 +133,32 @@
     }
     /* HTML: <div class="loader"></div> */
     .loader {
-      width: 120px;
+      width: 50px;
-      height: 20px;
+      aspect-ratio: 1;
-      background:
+      display: grid;
-        linear-gradient(90deg, #0000 ,orange) left -50px top 0/50px 20px no-repeat
-        lightblue;
-      animation: l2 1s infinite linear;
     }
-    @keyframes l2 {
+    .loader::before,
-      100% {background-position: right -50px top 0}
+    .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>