全局加载条 首屏加载条

public/index.html

@@ -20,7 +20,54 @@
             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">
+         <style>
+            .firstLoading {
+               position: fixed;
+               left: 50%;
+               top: 50%;
+               transform: translate(-50%, -50%);
+               height: 58px;
+               width: 58px;
+            }
+            .firstLoading .circular {
+               display: inline;
+               height: 100%;
+               width: 100%;
+               animation: loading-rotate 2s linear infinite;
+            }
+            .firstLoading .circular .path {
+               animation: loading-dash 1.5s ease-in-out infinite;
+               stroke-dasharray: 90, 150;
+               stroke-dashoffset: 0;
+               stroke-width: 4;
+               stroke: #f5c42d;
+               stroke-linecap: round;
+            }
+            @keyframes loading-rotate {
+               to {
+                  transform: rotate(360deg);
+               }
+            }
+            @keyframes loading-dash {
+               0% {
+                  stroke-dasharray: 1, 200;
+                  stroke-dashoffset: 0;
+               }
+               50% {
+                  stroke-dasharray: 90, 150;
+                  stroke-dashoffset: -40px;
+               }
+               to {
+                  stroke-dasharray: 90, 150;
+                  stroke-dashoffset: -120px;
+               }
+            }
+         </style>
+         <div class="firstLoading">
+            <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none"></circle></svg>
+         </div>
+      </div>
       <!-- built files will be auto injected -->
    </body>
 </html>

src/assets/elementTheme.scss

@@ -12,7 +12,10 @@
 @use "element-plus/theme-chalk/src/index.scss" as *;
 
 /* 普通模式 */
-// :root {}
+:root {
+   --el-loading-spinner-size: 50px;
+   --el-loading-fullscreen-spinner-size: 58px;
+}
 /* 暗黑模式 */
 //html.dark {}
 
@@ -27,3 +30,8 @@
    font-size: 22px;
    color: #aaaaaa;
 }
+
+/* 加载条加宽 */
+.el-loading-spinner .path {
+   stroke-width: 4;
+}

src/plugin/loadingBar/loadingBar.vue

@@ -6,7 +6,10 @@
 <template>
    <div v-show="loadingBarData.show" class="h-loading-bar">
       <div class="loading-bar-content">
-         <img src="./loading.gif" />
+         <!-- <img src="./loading.gif" /> -->
+         <div class="loading-svg">
+            <svg class="circular" viewBox="0 0 50 50"><circle class="path" cx="25" cy="25" r="20" fill="none" /></svg>
+         </div>
          <span>{{ loadingBarData.text }}</span>
       </div>
    </div>
@@ -82,13 +85,50 @@ body.h-loadingBarBody {
       flex-direction: column;
       align-items: center;
       color: $color-primary;
+      .loading-svg {
+         height: 58px;
+         width: 58px;
+         .circular {
+            display: inline;
+            height: 100%;
+            width: 100%;
+            animation: loading-rotate-svg 2s linear infinite;
+            .path {
+               animation: loading-dash-svg 1.5s ease-in-out infinite;
+               stroke-dasharray: 90, 150;
+               stroke-dashoffset: 0;
+               stroke-width: 4;
+               stroke: #f5c42d;
+               stroke-linecap: round;
+            }
+         }
+      }
       & > img {
          width: 260px;
       }
       & > span {
-         margin-top: -80px;
-         font-size: $font-size-large;
+         margin-top: 10px;
+         font-size: $font-size-extra-large;
       }
    }
 }
+@keyframes loading-rotate-svg {
+   to {
+      transform: rotate(360deg);
+   }
+}
+@keyframes loading-dash-svg {
+   0% {
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+   }
+   50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -40px;
+   }
+   to {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -120px;
+   }
+}
 </style>