feat: global loading add text

5 years ago · 4f98978eda
4 changed files with 56 additions and 74 deletions
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@ -1,5 +1,9 @@
 ## Wip

+### ✨ Features
+
+- 全局 loading 添加文本
+
 ### ⚡ Performance Improvements

 - Layout 界面布局样式调整
--- 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,
      },
    })
  );
--- 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>
--- a/public/resource/img/loading.svg
+++ b/public/resource/img/loading.svg
@ -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>