diff --git a/components/spin/Spin.tsx b/components/spin/Spin.tsx
index c42ca76b6..7257d93e4 100644
--- a/components/spin/Spin.tsx
+++ b/components/spin/Spin.tsx
@@ -120,7 +120,7 @@ export default defineComponent({
   render() {
     const { size, prefixCls: customizePrefixCls, tip, wrapperClassName } = this.$props;
     const { class: cls, style, ...divProps } = this.$attrs;
-    const { getPrefixCls } = this.configProvider;
+    const { getPrefixCls, direction } = this.configProvider;
     const prefixCls = getPrefixCls('spin', customizePrefixCls);
 
     const { sSpinning } = this;
@@ -130,6 +130,7 @@ export default defineComponent({
       [`${prefixCls}-lg`]: size === 'large',
       [`${prefixCls}-spinning`]: sSpinning,
       [`${prefixCls}-show-text`]: !!tip,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
       [cls as string]: !!cls,
     };
 
diff --git a/components/spin/style/index.less b/components/spin/style/index.less
index ca3cad4da..c64d29ea8 100644
--- a/components/spin/style/index.less
+++ b/components/spin/style/index.less
@@ -36,7 +36,7 @@
         position: absolute;
         top: 50%;
         left: 50%;
-        margin: (-@spin-dot-size / 2);
+        margin: -(@spin-dot-size / 2);
       }
       .@{spin-prefix-cls}-text {
         position: absolute;
@@ -46,31 +46,31 @@
         text-shadow: 0 1px 2px @shadow-color-inverse;
       }
       &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
-        margin-top: (-@spin-dot-size / 2) - 10px;
+        margin-top: -(@spin-dot-size / 2) - 10px;
       }
     }
 
     > div > .@{spin-prefix-cls}-sm {
       .@{spin-prefix-cls}-dot {
-        margin: (-@spin-dot-size-sm / 2);
+        margin: -(@spin-dot-size-sm / 2);
       }
       .@{spin-prefix-cls}-text {
         padding-top: ((@spin-dot-size-sm - @font-size-base) / 2) + 2px;
       }
       &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
-        margin-top: (-@spin-dot-size-sm / 2) - 10px;
+        margin-top: -(@spin-dot-size-sm / 2) - 10px;
       }
     }
 
     > div > .@{spin-prefix-cls}-lg {
       .@{spin-prefix-cls}-dot {
-        margin: (-@spin-dot-size-lg / 2);
+        margin: -(@spin-dot-size-lg / 2);
       }
       .@{spin-prefix-cls}-text {
         padding-top: ((@spin-dot-size-lg - @font-size-base) / 2) + 2px;
       }
       &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
-        margin-top: (-@spin-dot-size-lg / 2) - 10px;
+        margin-top: -(@spin-dot-size-lg / 2) - 10px;
       }
     }
   }
@@ -212,3 +212,5 @@
     transform: rotate(405deg);
   }
 }
+
+@import './rtl';
diff --git a/components/spin/style/rtl.less b/components/spin/style/rtl.less
new file mode 100644
index 000000000..03fb9b257
--- /dev/null
+++ b/components/spin/style/rtl.less
@@ -0,0 +1,20 @@
+.@{spin-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-dot {
+    &-spin {
+      .@{spin-prefix-cls}-rtl & {
+        transform: rotate(-45deg);
+        animation-name: antRotateRtl;
+      }
+    }
+  }
+}
+
+@keyframes antRotateRtl {
+  to {
+    transform: rotate(-405deg);
+  }
+}