添加首页loading

2 years ago · 9083c7a034
3 changed files with 29 additions and 2 deletions
--- a/docs/demo/src/WTA/wwwroot/app.js
+++ b/docs/demo/src/WTA/wwwroot/app.js
@ -2,7 +2,7 @@ import html from "html";
 import { ElConfigProvider } from "element-plus";
 import zh from "./lib/element-plus/locale/zh-cn.min.mjs";
 import en from "./lib/element-plus/locale/en.min.mjs";
-import { Suspense, reactive } from "vue";
+import { Suspense, reactive, onMounted } from "vue";

 export default {
  components: { ElConfigProvider, Suspense },
@ -19,6 +19,7 @@ export default {
        ["en", en],
      ])
    );
+    onMounted(() => document.querySelector("#loading.loading").classList.remove("loading"));
    return {
      localeMap,
    };
--- a/docs/demo/src/WTA/wwwroot/assets/icons/loading.svg
+++ b/docs/demo/src/WTA/wwwroot/assets/icons/loading.svg
@ -0,0 +1 @@
+<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
--- a/docs/demo/src/WTA/wwwroot/index.html
+++ b/docs/demo/src/WTA/wwwroot/index.html
@ -5,12 +5,37 @@
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <base href="/" />
+  <style>
+    @keyframes loading-rotate {
+      to {
+        transform: rotate(360deg)
+      }
+    }
+
+    #loading {
+      display: none;
+      animation: loading-rotate 2s linear infinite;
+    }
+
+    #loading.loading {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      width: 50px;
+      height: 50px;
+    }
+  </style>
  <link rel="stylesheet" href="./main.css" />
  <title></title>
 </head>

 <body>
  <div id="app"></div>
+  <img src="./assets/icons/loading.svg" id="loading" class="loading">
  <script type="importmap">
    {
      "imports": {
@ -44,4 +69,4 @@
  <script type="module" src="./main.js"></script>
 </body>

-</html>
+</html>
			`@ -0,0 +1 @@`
			<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>