diff --git a/index.html b/index.html
index 4441eb6e..9677e1b3 100644
--- a/index.html
+++ b/index.html
@@ -13,10 +13,83 @@
   </head>
 
   <body>
-    <div id="app" class="app"></div>
+    <div id="app" class="app">
+      <!--加载动画-->
+      <div class="cm-spinner"></div>
+    </div>
     <script type="module" src="/src/main.ts"></script>
     <script>
       global = globalThis;
     </script>
+
+    <style>
+      html,
+      body,
+      #app {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      .cm-spinner {
+        position: relative;
+        width: 150px;
+        height: 150px;
+        border: 3px solid transparent;
+        border-top: 4px solid #f15e41;
+        border-radius: 50%;
+        animation: spin 4s linear infinite;
+        animation: spin 4s linear infinite;
+      }
+
+      .cm-spinner::before,
+      .cm-spinner::after {
+        position: absolute;
+        inset: 6px;
+        content: "";
+        border: 4px solid transparent;
+        border-radius: 50%;
+      }
+
+      .cm-spinner::before {
+        border-top-color: #bad375;
+        animation: 3s spin linear infinite;
+        animation: 3s spin linear infinite;
+      }
+
+      .cm-spinner::after {
+        border-top-color: #26a9e0;
+        animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite;
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes spin {
+        from {
+          transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+
+        to {
+          transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    </style>
   </body>
 </html>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 349b9293..a9f361b6 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -83,7 +83,17 @@
           />
 
           <div class="captcha">
-            <img :src="captchaBase64" @click="getCaptcha" />
+            <el-image
+              :src="captchaBase64"
+              @click="getCaptcha"
+              class="w-[120px] h-[48px] cursor-pointer"
+            >
+              <template #error>
+                <div class="image-slot">
+                  <i-ep-picture />
+                </div>
+              </template>
+            </el-image>
           </div>
         </el-form-item>
 
@@ -305,10 +315,19 @@ onMounted(() => {
       top: 0;
       right: 0;
 
-      img {
-        width: 120px;
-        height: 48px;
-        cursor: pointer;
+      .image-slot {
+        display: flex;
+        align-items: center;
+        justify-content: right;
+        width: 100%;
+        height: 100%;
+        font-size: 18px;
+        color: var(--el-text-color-secondary);
+        background: var(--el-fill-color-light);
+
+        svg {
+          margin-right: 10px;
+        }
       }
     }
   }
