update 优化首屏加载提示

web-react/src/assets/style/main.less

@@ -17,14 +17,73 @@
 
     width: 100%;
     height: 100%;
+
+    background-color: @layout-header-background;
     >.ant-spin-nested-loading {
       height: 100%;
       >div>.ant-spin {
         max-height: none;
+        @-webkit-keyframes borderScale {
+          0% {
+            border: 5px solid white;
+          }
+          50% {
+            border: 25px solid transparent;
+          }
+          100% {
+            border: 5px solid white;
+          }
+        }
+        @keyframes borderScale {
+          0% {
+            border: 5px solid white;
+          }
+          50% {
+            border: 25px solid transparent;
+          }
+          100% {
+            border: 5px solid white;
+          }
+        }
+        .loader-container {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+
+          box-sizing: content-box;
+          width: 200px;
+          height: 200px;
+          margin: 0 auto;
+          margin-right: -50%;
+
+          transform: translate(-50%, -50%);
+          -webkit-animation: borderScale 1s infinite ease-in-out;
+                  animation: borderScale 1s infinite ease-in-out;
+
+          color: white;
+          border: 5px solid transparent;
+          border-radius: 50%;
+          >p {
+            font-family: 'Raleway', sans-serif;
+            font-size: 2em;
+            font-weight: bold;
+
+            position: absolute;
+            top: 50%;
+            left: 50%;
+
+            margin-right: -50%;
+
+            transform: translate(-50%, -50%);
+          }
+        }
       }
       >.ant-spin-container {
         width: 100%;
         height: 100%;
+        &.ant-spin-blur {
+          opacity: 0;
+        }
       }
     }
   }

web-react/src/views/main/index.jsx

@@ -232,21 +232,24 @@ export default class index extends Component {
     }
 
     render() {
-        const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />
+        const { loading, panes, actived } = this.state
 
         return (
             <section className="yo-layout--spin">
-                <Spin spinning={this.state.loading} indicator={antIcon}>
+                <Spin
+                    spinning={loading}
+                    indicator={
+                        <div className="loader-container">
+                            <p>Loading</p>
+                        </div>
+                    }
+                >
                     <Layout className="yo-layout--top-nav--container-fluid yo-layout--top-nav">
                         <Layout>
                             <Header />
                             <Layout className="yo-nav-theme--light">
                                 <Sider />
-                                <Content
-                                    parent={this}
-                                    panes={this.state.panes}
-                                    actived={this.state.actived}
-                                />
+                                <Content parent={this} panes={panes} actived={actived} />
                             </Layout>
                         </Layout>
                     </Layout>