feat: 添加上传加载动画及样式

在页面中添加上传时的加载动画，包含旋转效果和半透明遮罩层，提升用户体验
2025-10-16 19:58:04 +08:00
parent 4a1218e2bf
commit 26cc083512
4 changed files with 88 additions and 0 deletions
--- a/css/index.css
+++ b/css/index.css
@@ -339,3 +339,41 @@ editor {
  background-color: #ff0000;
  z-index: 999;
 }
+.loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  align-items: center;
+  justify-content: center;
+  animation: show 0.5s;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  font-size: 14px;
+}
+.loading .loading-img {
+  width: 1.2rem;
+  height: 1.2rem;
+  animation: loadingRotate 1s linear infinite;
+  margin-bottom: 10px;
+}
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes loadingRotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}