From af002cffcfc7b426db565ba7061b7af5befd93b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=87=AA=E5=B8=A6=E5=A4=A7=E4=BD=AC=E6=B0=94=E5=9C=BA?=
 <188633308@qq.com>
Date: Tue, 22 Jun 2021 11:25:09 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E4=BC=98=E5=8C=96=E9=A6=96=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-react/src/assets/style/main.less | 59 ++++++++++++++++++++++++++++
 web-react/src/views/main/index.jsx   | 17 ++++----
 2 files changed, 69 insertions(+), 7 deletions(-)

diff --git a/web-react/src/assets/style/main.less b/web-react/src/assets/style/main.less
index e0f4171..04a6030 100644
--- a/web-react/src/assets/style/main.less
+++ b/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;
+        }
       }
     }
   }
diff --git a/web-react/src/views/main/index.jsx b/web-react/src/views/main/index.jsx
index 5694edc..665c59f 100644
--- a/web-react/src/views/main/index.jsx
+++ b/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>