diff --git a/docs/demo/src/WTA/wwwroot/app.js b/docs/demo/src/WTA/wwwroot/app.js
index 937bad15..9f35eb2c 100644
--- 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,
     };
diff --git a/docs/demo/src/WTA/wwwroot/assets/icons/loading.svg b/docs/demo/src/WTA/wwwroot/assets/icons/loading.svg
new file mode 100644
index 00000000..ad6abaf3
--- /dev/null
+++ 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>
diff --git a/docs/demo/src/WTA/wwwroot/index.html b/docs/demo/src/WTA/wwwroot/index.html
index 0627c5db..e487ebc9 100644
--- 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>
\ No newline at end of file
+</html>
