u

code/base-project/base-vue/packages/ao-design/src/spin/index.scss

@@ -2,38 +2,44 @@
 
 $spin-prefix: #{$prefix}-spin;
 
-.#{$spin-prefix}-wrapper {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-}
-
 .#{$spin-prefix} {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 10;
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: $text-color-base;
-  }
+  display: inline-block;
 
   &-icon {
     color: $primary-color;
+    font-size: 16px;
   }
+
   &-tip {
     margin-top: 4px;
     font-size: 12px;
-    color: $text-color-base;
+    color: $primary-color;
   }
 
-  &.rounded {
-    border-radius: inherit;
+  &.#{$spin-prefix}-has-tip {
+    text-align: center;
+  }
+
+  &.#{$spin-prefix}-loading {
+    position: relative;
+    user-select: none;
+
+    .#{$spin-prefix}-mask {
+      position: absolute;
+      inset: 0;
+      z-index: 11;
+      text-align: center;
+      background-color: $bg-color-mask-spin;
+      transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+      user-select: none;
+
+      .#{$spin-prefix}-mask-inner {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        z-index: 12;
+        transform: translate(-50%, -50%);
+      }
+    }
   }
 }