Update loader

suhanw · Jan 9, 2025 · d2c37b2 · d2c37b2
1 parent 751a7c6
commit d2c37b2
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 34 deletions.
diff --git a/components/app-loader/index.js b/components/app-loader/index.js
@@ -40,7 +40,7 @@ function AppLoader({ prefetchUrl, appUrl }) {
         {!hasError ? (
           <>
             <h2>Warming up my free server...</h2>
-            <span className={style.loader}></span>
+            <span className={style.loader} />
             <p>It's loading soon, I swear.</p>
 
             <figure>{loadingGif && <img src={loadingGif} />}</figure>

diff --git a/components/app-loader/style.less b/components/app-loader/style.less
@@ -23,52 +23,34 @@
     text-align: center;
 
     img {
-      width: 80%;
+      width: 100%;
     }
   }
 }
 
 .loader {
-  width: 175px;
-  height: 80px;
   display: block;
-  margin: 16px auto auto auto;
-  background-image: radial-gradient(
-      circle 25px at 25px 25px,
-      #cbf2ff 100%,
-      transparent 0
-    ),
-    radial-gradient(circle 50px at 50px 50px, #cbf2ff 100%, transparent 0),
-    radial-gradient(circle 25px at 25px 25px, #cbf2ff 100%, transparent 0),
-    linear-gradient(#cbf2ff 50px, transparent 0);
-  background-size: 50px 50px, 100px 76px, 50px 50px, 120px 40px;
-  background-position: 0px 30px, 37px 0px, 122px 30px, 25px 40px;
-  background-repeat: no-repeat;
   position: relative;
-  box-sizing: border-box;
+  height: 12px;
+  width: 100%;
+  border: 1px solid #000;
+  border-radius: 10px;
+  overflow: hidden;
 
   &::after {
     content: "";
-    left: 0;
-    right: 0;
-    margin: auto;
-    bottom: 20px;
     position: absolute;
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    border: 5px solid transparent;
-    border-color: #81cd2e transparent;
-    box-sizing: border-box;
-    animation: rotation 1s linear infinite;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 0;
+    background: #81cd2e;
+    animation: prog 25s ease-out infinite;
   }
 }
 
-@keyframes rotation {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
+@keyframes prog {
+  to {
+    width: 100%;
   }
 }