add background to the async animation

Author: LIUSHANYIN

src/components/Stepper/index.scss

@@ -24,6 +24,7 @@ $baseClass: 'vant-stepper';
   input {
     margin: 0px 2px;
     border-radius: 5px;
+    font-size: 20px;
     border: none;
     display: flex;
     justify-content: center;
@@ -39,19 +40,32 @@ $baseClass: 'vant-stepper';
     border: none;
     font-weight: 100;
   }
-  .loading{
+  .load-background{
     display: inline-block;
     border: 4px solid rgba(0, 0, 0, 0.1);
-    border-left-color: grey;
+    border-left-color: white;
     border-radius: 50%;
-    width: 65px;
-    height: 65px;
+    width: 35px;
+    height: 35px;
     animation: donut-spin 1.2s linear infinite;
+    position: relative;
+    
+    opacity: 0;
+  }
+  .load{
+    width: 85px;
+    height: 85px;
     position: absolute;
-    left: 47%;
-    top: 35%;
+    top: 30%;
+    background-color: rgba(0, 0, 0, 0.836);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+    margin: auto;
     opacity: 0;
   }
+
 }
 
 button.#{$baseClass} {

src/components/Stepper/index.tsx

@@ -37,6 +37,7 @@ export default function Stepper({
   const [plus, setPlus] = useState(false);
   const [Input, setInput] = useState(false);
   const animationDiv = document.getElementById('loading');
+  const animationBackground = document.getElementById('loading-background');
 
   const plusBtProps = {
     className: classnames(baseClass, [{ disabled }, { theme }]),
@@ -54,13 +55,16 @@ export default function Stepper({
   const handleIncrement = () => {
     if (loading) {
       ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
+      ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
       const handlePlus = () => {
         if (step) {
           setValue(value + step);
           ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+          ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
         } else {
           setValue(value + 1);
           ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+          ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
         }
       };
 
@@ -75,13 +79,17 @@ export default function Stepper({
     const canMinus = value - step;
     if (loading) {
       ReactDOM.findDOMNode(animationDiv).style.opacity = 1;
+      ReactDOM.findDOMNode(animationBackground).style.opacity = 1;
+
       const handleMinus = () => {
         if (step) {
           setValue(value - step);
           ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+          ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
         } else {
           setValue(value - 1);
           ReactDOM.findDOMNode(animationDiv).style.opacity = 0;
+          ReactDOM.findDOMNode(animationBackground).style.opacity = 0;
         }
       };
       setTimeout(handleMinus, 2000);
@@ -197,7 +205,11 @@ export default function Stepper({
       <button onClick={handleIncrement} {...plusBtProps} disabled={plus}>
         +
       </button>
-      {loading && <div id='loading' className='loading' />}
+      {loading && (
+        <div id='loading-background' className='load'>
+          <div id='loading' className='load-background' />
+        </div>
+      )}
     </div>
   );
 }