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

在页面中添加上传时的加载动画，包含旋转效果和半透明遮罩层，提升用户体验

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);
+  }
+}

css/index.less

@@ -399,3 +399,49 @@ 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;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: show 0.5s;
+    display: flex;
+    flex-direction: column;
+    color: #fff;
+    font-size: 14px;
+
+    .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);
+    }
+}

index.html

@@ -14,6 +14,10 @@
             <!-- <div class="btn-f">点击</div> -->
 
         <div class="container" id="appIndex">
+            <div class="loading">
+                <img class="loading-img" src="./img/loading.png" />
+                上传中
+            </div>
             <div class="title-box">
                 <textarea class="input" id="title" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
             </div>