通用加载

package.json

@@ -22,6 +22,7 @@
     "date-fns": "^1.30.1",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
+    "emotion": "^10.0.9",
     "eslint": "5.12.0",
     "eslint-config-react-app": "^3.0.8",
     "eslint-loader": "2.1.1",
@@ -61,6 +62,7 @@
     "react-mobile-swiper": "^1.1.4",
     "react-redux": "^7.0.2",
     "react-router-dom": "^5.0.1",
+    "react-spinners": "^0.5.4",
     "redux": "^4.0.1",
     "redux-immutable": "^4.0.0",
     "redux-logger": "^3.0.6",

src/common/Loading/index.js

-import React, { Component } from 'react'
-import { ActivityIndicator } from 'antd-mobile'
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom'
+import { HashLoader } from "react-spinners";
+import { css } from 'emotion'
 import './loading.scss'
 
-export default class componentName extends Component {
+const override = css({
+    display: 'block',
+    marginTop: '-100px'
+})
+
+const container = document.documentElement || document.body
+
+class Loading extends Component {
+
+    static defaultProps = {
+        isLoading: true,
+        text: '加载中'
+    }
+
     render() {
-        return (
+        const innerLoading =
             <div className="loading">
-                <ActivityIndicator></ActivityIndicator>
-                <span>加载中</span>
+                <div className="loading-wrapper">
+                    <HashLoader
+                        css={override}
+                        size={50}
+                        color={'#09f'}
+                    />
+                    <p>{this.props.text}</p>
+                </div>
             </div>
-        )
+
+        return (
+            this.props.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
+        );
     }
 }
+
+export default Loading;
\ No newline at end of file

src/common/Loading/loading.scss

-.loading{
-    display: flex;
-    width:100%;
-    height:44px;
-    line-height: 44px;
-    justify-content: center;
-    align-items: center;
-    span{
-        margin-left:5px;
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    .loading-wrapper {
+        display: flex;
+        flex-flow: column;
+        justify-content: center;
+        align-items: center;
+        p {
+            font-size: 14px;
+            margin-top: 12px;
+            color: $active;
+        }
     }
 }
\ No newline at end of file