feat: global loading add text

vben
1 parent 275ad9f1
Showing 4 changed files with 56 additions and 74 deletions
CHANGELOG.zh_CN.md
build/vite/plugin/index.ts
index.html
public/resource/img/loading.svg
 ## Wip
+### ✨ Features
+
+- 全局 loading 添加文本
+
 ### ⚡ Performance Improvements
 - Layout 界面布局样式调整
@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) {
           : '',
         // Insert Baidu statistics code
         hmScript: isSiteMode() ? hmScript : '',
+        title: VITE_GLOB_APP_TITLE,
       },
     })
   );
@@ -9,79 +9,71 @@
       name="viewport"
       content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
     />
+
     <title></title>
     <link rel="icon" href="/favicon.ico" />
     <%= viteHtmlPluginOptions.injectConfig %>
-  </head>
-  <body>
-    <div id="app">
-      <style>
-        @keyframes load {
-          0% {
-            -webkit-transform: rotate(-360deg);
-            -moz-transform: rotate(-360deg);
-            -ms-transform: rotate(-360deg);
-            -o-transform: rotate(-360deg);
-            transform: rotate(-360deg);
-          }
-          100% {
-            -webkit-transform: rotate(0);
-            -moz-transform: rotate(0);
-            -ms-transform: rotate(0);
-            -o-transform: rotate(0);
-            transform: rotate(0);
-          }
+    <style>
+      @keyframes load {
+        0% {
+          -webkit-transform: rotate(-360deg);
+          transform: rotate(-360deg);
         }
-        .g-loading {
-          -webkit-animation: load 2s linear infinite;
-          -moz-animation: load 2s linear infinite;
-          -ms-animation: load 2s linear infinite;
-          -o-animation: load 2s linear infinite;
-          animation: load 2s linear infinite;
-          -webkit-transform-origin: center center;
-          -moz-transform-origin: center center;
-          -ms-transform-origin: center center;
-          -o-transform-origin: center center;
-          transform-origin: center center;
+        100% {
+          -webkit-transform: rotate(0);
+          transform: rotate(0);
         }
+      }
-        .app-loading {
-          width: 100%;
-          height: 100%;
-          background: rgba(255, 255, 255, 0, 1);
-        }
+      .app-loading {
+        width: 100%;
+        height: 100%;
-        .app-loading .app-loading-wrap {
-          position: absolute;
-          top: 45%;
-          left: 50%;
-          width: 64px;
-          -ms-transform: translate3d(-50%, -50%, 0);
-          -moz-transform: translate3d(-50%, -50%, 0);
-          -webkit-transform: translate3d(-50%, -50%, 0);
-          -o-transform: translate3d(-50%, -50%, 0);
-          transform: translate3d(-50%, -50%, 0);
-        }
+        /* background: #f0f2f5; */
+      }
-        .app-loading .app-loading-wrap img.logo {
-          margin-bottom: 20px;
-          margin-left: -20px;
-        }
+      .app-loading .app-loading-wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        -webkit-transform: translate3d(-50%, -50%, 0);
+        transform: translate3d(-50%, -50%, 0);
+      }
-        .app-loading .app-loading-wrap .app-loading__tip {
-          display: block;
-          margin-top: 4px;
-          font-size: 13px;
-          color: #303133;
-          text-align: center;
-        }
-      </style>
+      .app-loading .g-loading {
+        display: block;
+        width: 64px;
+        margin: 30px auto;
+        -webkit-animation: load 1.2s linear infinite;
+        animation: load 1.2s linear infinite;
+        -webkit-transform-origin: center center;
+        transform-origin: center center;
+      }
+
+      .app-loading .app-loading-wrap img.logo {
+        display: block;
+        width: 90px;
+        margin: 0 auto;
+        margin-bottom: 20px;
+      }
+
+      .app-loading .app-loading-wrap .app-loading__tip {
+        display: block;
+        margin: 20px auto 0 0;
+        font-size: 30px;
+        color: #2c3a61;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
       <section class="app-loading">
         <section class="app-loading-wrap">
           <img src="./resource/img/logo.png" class="logo" alt="Logo" />
           <img src="./resource/img/loading.svg" alt="" class="g-loading" />
+          <h1 class="app-loading__tip"><%= viteHtmlPluginOptions.title %></h1>
         </section>
       </section>
     </div>
@@ -18,21 +18,6 @@
         .bottom {
           fill: #9dbfe4;
         }
-        @keyframes load {
-          0% {
-            transform: rotate(-360deg);
-          }
-
-          100% {
-            transform: rotate(0);
-          }
-        }
-
-        .load {
-          animation: load 1.4s linear infinite;
-          transform-origin: center center;
-        }
-
         svg {
           display: block;
         }
@@ -42,7 +27,7 @@
           min-width: 100px;
           margin-top: 4px;
           font-size: 13px;
-          color: #303133;
+          color: #2C3A61;
           text-align: left;
         }
   </style>