diff --git a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
index cb188c6f45..3258dedc41 100644
--- a/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -119,14 +119,38 @@ exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correc
 exports[`renders components/spin/demo/delayAndDebounce.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
->
-  <span>
-    Show fullscreen for 2s
-  </span>
-</button>
+Array [
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Show fullscreen for 3s
+    </span>
+  </button>,
+  <div
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin ant-spin-fullscreen"
+  >
+    <span
+      class="ant-spin-dot ant-spin-dot-spin"
+    >
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+    </span>
+  </div>,
+]
 `;
 
 exports[`renders components/spin/demo/fullscreen.tsx extend context correctly 2`] = `[]`;
diff --git a/components/spin/__tests__/__snapshots__/demo.test.ts.snap b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
index 7cecfdc74e..a00164e8f7 100644
--- a/components/spin/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/spin/__tests__/__snapshots__/demo.test.ts.snap
@@ -113,14 +113,38 @@ exports[`renders components/spin/demo/delayAndDebounce.tsx correctly 1`] = `
 `;
 
 exports[`renders components/spin/demo/fullscreen.tsx correctly 1`] = `
-<button
-  class="ant-btn ant-btn-default"
-  type="button"
->
-  <span>
-    Show fullscreen for 2s
-  </span>
-</button>
+Array [
+  <button
+    class="ant-btn ant-btn-default"
+    type="button"
+  >
+    <span>
+      Show fullscreen for 3s
+    </span>
+  </button>,
+  <div
+    aria-busy="false"
+    aria-live="polite"
+    class="ant-spin ant-spin-fullscreen"
+  >
+    <span
+      class="ant-spin-dot ant-spin-dot-spin"
+    >
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+      <i
+        class="ant-spin-dot-item"
+      />
+    </span>
+  </div>,
+]
 `;
 
 exports[`renders components/spin/demo/inside.tsx correctly 1`] = `
diff --git a/components/spin/demo/fullscreen.tsx b/components/spin/demo/fullscreen.tsx
index b7b233d4b8..32dacea9dc 100644
--- a/components/spin/demo/fullscreen.tsx
+++ b/components/spin/demo/fullscreen.tsx
@@ -1,21 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button, Spin } from 'antd';
 
 const App: React.FC = () => {
-  const [show, setShow] = useState(false);
+  const [spinning, setSpinning] = React.useState<boolean>(false);
 
   const showLoader = () => {
-    setShow(true);
-
+    setSpinning(true);
     setTimeout(() => {
-      setShow(false);
-    }, 2000);
+      setSpinning(false);
+    }, 3000);
   };
 
   return (
     <>
-      <Button onClick={showLoader}>Show fullscreen for 2s</Button>
-      {show && <Spin fullscreen size="large" />}
+      <Button onClick={showLoader}>Show fullscreen for 3s</Button>
+      <Spin spinning={spinning} fullscreen />
     </>
   );
 };
diff --git a/components/spin/index.tsx b/components/spin/index.tsx
index 617c488dbe..53d5e1da02 100644
--- a/components/spin/index.tsx
+++ b/components/spin/index.tsx
@@ -132,6 +132,7 @@ const Spin: React.FC<SpinClassProps> = (props) => {
       [`${prefixCls}-spinning`]: spinning,
       [`${prefixCls}-show-text`]: !!tip,
       [`${prefixCls}-fullscreen`]: fullscreen,
+      [`${prefixCls}-fullscreen-show`]: fullscreen && spinning,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
diff --git a/components/spin/style/index.tsx b/components/spin/style/index.ts
similarity index 97%
rename from components/spin/style/index.tsx
rename to components/spin/style/index.ts
index 7f60f82c3f..cbd61d563c 100644
--- a/components/spin/style/index.tsx
+++ b/components/spin/style/index.ts
@@ -64,7 +64,6 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
       fontSize: token.fontSize,
       paddingTop: dotPadding(token),
     },
-
     '&-fullscreen': {
       position: 'fixed',
       width: '100vw',
@@ -76,6 +75,14 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
       alignItems: 'center',
       flexDirection: 'column',
       justifyContent: 'center',
+      pointerEvents: 'none',
+      opacity: 0,
+      visibility: 'hidden',
+      transition: `all ${token.motionDurationMid}`,
+      '&-show': {
+        opacity: 1,
+        visibility: 'visible',
+      },
       [`${token.componentCls}-dot ${token.componentCls}-dot-item`]: {
         backgroundColor: token.colorWhite,
       },