Merge pull request #66 from doroudi:doroudi/issue64

✨ Add Preloading screen
doroudi · Apr 10, 2024 · b45ac3f · b45ac3f
2 parents f22091e + a871efb
commit b45ac3f
Showing 1 changed file with 106 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -3,13 +3,112 @@
 
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>YummyAdmin - Free Vue3 dashboard</title>
   <link rel="apple-touch-icon" href="/pwa-192x192.png">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
   <link rel="icon" type="image/svg+xml" href="favicon.svg" />
-  <meta rel="description" content="Free Vue3 Dashboard - Modern Admin Panel for VueJs build using Naive UI. free to use and open source" />
+  <meta rel="description"
+    content="Free Vue3 Dashboard - Modern Admin Panel for VueJs build using Naive UI. free to use and open source" />
   <meta name="msapplication-TileColor" content="#00aba9">
+  <style>
+    .preloader {
+      display: flex;
+      height: 100vh;
+      align-items: center;
+      justify-content: center;
+      line-height: 1.8em;
+      flex-direction: column;
+    }
+
+
+    .preloader h1 {
+      margin-top: 1rem;
+      font-weight: bold;
+      font-size: 1.44rem;
+    }
+
+    .loader {
+      animation: rotate 1s infinite;
+      height: 50px;
+      width: 50px;
+    }
+
+    .loader:before,
+    .loader:after {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      height: 20px;
+      width: 20px;
+    }
+
+    .loader:before {
+      animation: ball1 1s infinite;
+      background-color: #cb2025;
+      box-shadow: 30px 0 0 #f8b334;
+      margin-bottom: 10px;
+    }
+
+    .loader:after {
+      animation: ball2 1s infinite;
+      background-color: #00a096;
+      box-shadow: 30px 0 0 #97bf0d;
+    }
+
+    @keyframes rotate {
+      0% {
+        -webkit-transform: rotate(0deg) scale(0.8);
+        -moz-transform: rotate(0deg) scale(0.8);
+      }
+
+      50% {
+        -webkit-transform: rotate(360deg) scale(1.2);
+        -moz-transform: rotate(360deg) scale(1.2);
+      }
+
+      100% {
+        -webkit-transform: rotate(720deg) scale(0.8);
+        -moz-transform: rotate(720deg) scale(0.8);
+      }
+    }
+
+    @keyframes ball1 {
+      0% {
+        box-shadow: 30px 0 0 #f8b334;
+      }
+
+      50% {
+        box-shadow: 0 0 0 #f8b334;
+        margin-bottom: 0;
+        -webkit-transform: translate(15px, 15px);
+        -moz-transform: translate(15px, 15px);
+      }
+
+      100% {
+        box-shadow: 30px 0 0 #f8b334;
+        margin-bottom: 10px;
+      }
+    }
+
+    @keyframes ball2 {
+      0% {
+        box-shadow: 30px 0 0 #97bf0d;
+      }
+
+      50% {
+        box-shadow: 0 0 0 #97bf0d;
+        margin-top: -20px;
+        -webkit-transform: translate(15px, 15px);
+        -moz-transform: translate(15px, 15px);
+      }
+
+      100% {
+        box-shadow: 30px 0 0 #97bf0d;
+        margin-top: 0;
+      }
+    }
+  </style>
   <script>
     (function () {
       const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -34,8 +133,11 @@
 
 <body class="font-sans">
   <div id="app">
-    <h1>Yummy Admin - Free Vue 3 Dashboard</h1>
-    <span>Loading...</span>
+    <div class="preloader">
+      <div class="loader"></div>
+      <h1>Yummy Admin</h1>
+      <h2>Free Vue 3 Dashboard</h2>
+    </div>
   </div>
   <script type="module" src="/src/main.ts"></script>
   <noscript>This website requires JavaScript to function properly. Please enable JavaScript to continue.</noscript>