添加启动动画

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