添加启动动画

7 months ago · c1622edd03
2 changed files with 52 additions and 1 deletions
--- a/public/index.html
+++ b/public/index.html
@ -11,6 +11,30 @@
  <!-- 引入样式 -->
  <title>BUZZ Netdisk</title>
  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
+  <style>
+    .public-container {
+      background-color: #090A0F;
+      width: 100vw;
+      height: 100vh;
+      color: #B0BEC5;
+      overflow: hidden;
+      box-sizing: border-box;
+    }
+
+    .public-border {
+      width: 80vw;
+      height: 10px;
+      background-color: #A6A6A6;
+      margin: 40px 0;
+    }
+
+    .public-border-width {
+      width: 0%;
+      height: 100%;
+      background-color: #11c16d;
+      transition: all .25s linear;
+    }
+  </style>
 </head>

 <body>
@ -18,8 +42,35 @@
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
-  <div id="app"></div>
+  <div id="app">
+    <div class="public-container">
+      <div style="display: flex;justify-content:center;align-items: center;text-align: center;height:80vh">
+        <div>
+          <img src='./logo.png' style="width: 160px;height:160px;object-fit: cover;" alt="">
+          <div style="display: flex;justify-content: center;">
+            <div class="public-border">
+              <div class="public-border-width" id="loading"></div>
+            </div>
+          </div>
+          <div style="color:#11c16d">Loading...</div>
+        </div>
+      </div>
+    </div>
+  </div>
  <!-- built files will be auto injected -->
+  <script>
+    let publicLoading = document.getElementById('loading');
+    let publicWidth = 0;
+    let publicTimerID = null;
+    publicTimerID = setInterval(() => {
+      if (publicWidth > 99) {
+        clearInterval(publicTimerID);
+        return;
+      };
+      publicWidth += 1;
+      publicLoading.style.width = `${publicWidth}%`;
+    }, 100);
+  </script>
 </body>

 </html>
--- a/public/logo.png
+++ b/public/logo.png