feats

public/index.html

     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
     <style>
-      .mainloading {
+      .page-loading-wrapper {
         position: absolute;
         left: 0;
         top: 0;
         width: 100vw;
         height: 100vh;
         overflow: hidden;
+        z-index: 999;
+      }
 
+      .page-loading {
+        width: 100%;
+        height: 100%;
         background: #262626 url('./loading.gif') no-repeat center center;
-        z-index: 999;
+        animation: loadingrotate 2s linear infinite;
+      }
+
+      @keyframes loadingrotate {
+        100% {
+          transform:rotate(360deg);
+        }
       }
     </style>
   </head>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div class="mainloading"></div>
+    <div class="page-loading-wrapper">
+      <div class="page-loading"></div> 
+    </div>
     <div id="app"></div>
     <!-- built files will be auto injected -->
   </body>

src/utils/index.js

 
 export function hideLoading() {
-  document.getElementsByClassName('mainloading')[0].style="display: none"
+  document.getElementsByClassName('page-loading-wrapper')[0].style="display: none"
 }