feat: spin js2css

packages/semi-foundation/keyframes/rotate.scss

@@ -1,8 +0,0 @@
-@keyframes #{$prefix}-animation-rotate {
-    from {
-        transform: rotate(0);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}

packages/semi-foundation/spin/animation.scss

@@ -0,0 +1,2 @@
+$animation_duration-spin_wrapper-spin: 600ms; // 加载图标容器旋转一周时长
+$animation_duration-spin_customChildren-spin: 1600ms; // 自定义指示器时旋转一周时长

packages/semi-foundation/spin/spin.scss

@@ -1,7 +1,6 @@
-//@import '../theme/variables.scss';
+@import "./animation.scss";
 @import './variables.scss';
 @import './mixin.scss';
-@import '../keyframes/rotate.scss';
 
 $module: #{$prefix}-spin;
 
@@ -10,23 +9,32 @@ $module: #{$prefix}-spin;
     display: inline-block;
     @include size($width-spin_middle);
 
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
+
     &-wrapper {
         text-align: center;
         position: absolute;
         width: 100%;
-        transform: $motion-spin_wrapper-translate;
-        top: $spacing-spin_wrapper-top;
+        transform: translateY(-50%);
+        top: 50%;
         color: $color-spin-bg;
 
         & > svg {
-            animation: $motion-spin_wrapper_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
+            animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             @include size($width-spin_middle);
         }
     }
 
     &-animate {
         display: inline-flex;
-        animation: $motion-spin_animate_svg-animationDuration linear infinite #{$prefix}-animation-rotate;
+        animation: $animation_duration-spin_customChildren-spin linear infinite #{$prefix}-animation-rotate;
     }
 
     &-children {

packages/semi-foundation/spin/variables.scss

@@ -6,13 +6,7 @@ $width-spin_large: 32px; // 加载图标尺寸 - 大
 $width-spin_middle: 20px; // 加载图标尺寸 - 中
 $width-spin_small: 14px; // 加载图标尺寸 - 小
 
-// Spacing
-$spacing-spin_wrapper-top: 50%; // 加载图标尺寸 - 中
 
-// Motion
-$motion-spin_wrapper-translate: translate(0, -50%); // 加载图标d旋转动画
-$motion-spin_wrapper_svg-animationDuration: .6s; // 加载图标容器旋转一周时长
-$motion-spin_animate_svg-animationDuration: 1.6s; // 加载图标旋转一周时长
 
 // Other
-$opacity-spin_children: .5; // 加载图标旋转一周时长
+$opacity-spin_children: 0.5; // 加载图标透明度

packages/semi-ui/spin/index.tsx

@@ -91,22 +91,17 @@ class Spin extends BaseComponent<SpinProps, SpinState> {
     renderSpin() {
         const { indicator, tip } = this.props;
         const { loading } = this.state;
-        const spinIconCls = cls({
-            [`${prefixCls}-animate`]: loading,
-        });
 
-        return loading ? (
-            <div className={`${prefixCls}-wrapper`}>
-                {indicator ? (
-                    <div className={spinIconCls} x-semi-prop="indicator">
-                        {indicator}
-                    </div>
-                ) : (
-                    <SpinIcon />
-                )}
-                {tip ? <div x-semi-prop="tip">{tip}</div> : null}
-            </div>
-        ) : null;
+        return loading ? <div className={`${prefixCls}-wrapper`}>
+            {indicator ? (
+                <div className={`${prefixCls}-animate`} x-semi-prop="indicator">
+                    {indicator}
+                </div>
+            ) : (
+                <SpinIcon />
+            )}
+            {tip ? <div x-semi-prop="tip">{tip}</div> : null}
+        </div>:null
     }
 
     render() {