feat: global loading add text

vbenjs · Nov 1, 2020 · 4f98978 · 4f98978
1 parent 275ad9f
commit 4f98978
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 74 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -1,5 +1,9 @@
 ## Wip
 
+### ✨ Features
+
+- 全局 loading 添加文本
+
 ### ⚡ Performance Improvements
 
 - Layout 界面布局样式调整

diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
@@ -37,6 +37,7 @@ export function createVitePlugins(viteEnv: ViteEnv) {
           : '',
         // Insert Baidu statistics code
         hmScript: isSiteMode() ? hmScript : '',
+        title: VITE_GLOB_APP_TITLE,
       },
     })
   );

diff --git a/index.html b/index.html
@@ -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>

diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg