From f3d206da43b3b6584dfdf9c23c04e60b34275b8c Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Sat, 3 Apr 2021 14:20:43 +0800
Subject: [PATCH] refactor: loading update

---
 index.html | 343 ++++++++++++++++++-----------------------------------
 1 file changed, 114 insertions(+), 229 deletions(-)
diff --git a/index.html b/index.html
index 58100d3ba..037a43b48 100644
--- a/index.html
+++ b/index.html
@@ -13,246 +13,131 @@
     window.process = {}
   </script>
 </head>
+
 <body>
   <div id="app">
-     <style>
-        html,
-        body,
-        #app {
-          height: 100%;
-          margin: 0px;
-          padding: 0px;
+    <style>
+      .app-loading {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        background: #f4f7f9;
+      }
+
+      .app-loading .app-loading-wrap {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        -webkit-transform: translate3d(-50%, -50%, 0);
+        transform: translate3d(-50%, -50%, 0);
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      .app-loading .dots {
+        display: flex;
+        padding: 98px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .app-loading .app-loading-title {
+        display: flex;
+        margin-top: 30px;
+        font-size: 30px;
+        color: rgba(0, 0, 0, 0.85);
+        justify-content: center;
+        align-items: center;
+      }
+
+      .dot {
+        position: relative;
+        display: inline-block;
+        width: 48px;
+        height: 48px;
+        margin-top: 30px;
+        font-size: 32px;
+        transform: rotate(45deg);
+        box-sizing: border-box;
+        animation: antRotate 1.2s infinite linear;
+      }
+
+      .dot i {
+        position: absolute;
+        display: block;
+        width: 20px;
+        height: 20px;
+        background-color: #0065cc;
+        border-radius: 100%;
+        opacity: 0.3;
+        transform: scale(0.75);
+        animation: antSpinMove 1s infinite linear alternate;
+        transform-origin: 50% 50%;
+      }
+
+      .dot i:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+
+      .dot i:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
+
+      .dot i:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
+
+      .dot i:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
+
+      @keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
         }
+      }
 
-        .chromeframe {
-          margin: 0.2em 0;
-          background: #ccc;
-          color: #000;
-          padding: 0.2em 0;
+      @-webkit-keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
         }
+      }
 
-        #loader-wrapper {
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          z-index: 999999;
-        }
-
-        #loader {
-          display: block;
-          position: relative;
-          left: 50%;
-          top: 50%;
-          width: 150px;
-          height: 150px;
-          margin: -75px 0 0 -75px;
-          border-radius: 50%;
-          border: 3px solid transparent;
-          /* COLOR 1 */
-          border-top-color: #FFF;
-          -webkit-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -ms-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -moz-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -o-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          animation: spin 1s linear infinite;
-          /* Chrome, Firefox 16+, IE 10+, Opera */
-          z-index: 1001;
-        }
-
-        #loader:before {
-          content: "";
-          position: absolute;
-          top: 5px;
-          left: 5px;
-          right: 5px;
-          bottom: 5px;
-          border-radius: 50%;
-          border: 3px solid transparent;
-          /* COLOR 2 */
-          border-top-color: #FFF;
-          -webkit-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -moz-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -o-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -ms-animation: spin 1s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          animation: spin 1s linear infinite;
-          /* Chrome, Firefox 16+, IE 10+, Opera */
-        }
-
-        #loader:after {
-          content: "";
-          position: absolute;
-          top: 15px;
-          left: 15px;
-          right: 15px;
-          bottom: 15px;
-          border-radius: 50%;
-          border: 3px solid transparent;
-          border-top-color: #FFF;
-          /* COLOR 3 */
-          -moz-animation: spin 1.5s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -o-animation: spin 1.5s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -ms-animation: spin 1.5s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          -webkit-animation: spin 1.5s linear infinite;
-          /* Chrome, Opera 15+, Safari 5+ */
-          animation: spin 1.5s linear infinite;
-          /* Chrome, Firefox 16+, IE 10+, Opera */
-        }
-
-        @-webkit-keyframes spin {
-          0% {
-            -webkit-transform: rotate(0deg);
-            /* Chrome, Opera 15+, Safari 3.1+ */
-            -ms-transform: rotate(0deg);
-            /* IE 9 */
-            transform: rotate(0deg);
-            /* Firefox 16+, IE 10+, Opera */
-          }
-
-          100% {
-            -webkit-transform: rotate(360deg);
-            /* Chrome, Opera 15+, Safari 3.1+ */
-            -ms-transform: rotate(360deg);
-            /* IE 9 */
-            transform: rotate(360deg);
-            /* Firefox 16+, IE 10+, Opera */
-          }
-        }
-
-        @keyframes spin {
-          0% {
-            -webkit-transform: rotate(0deg);
-            /* Chrome, Opera 15+, Safari 3.1+ */
-            -ms-transform: rotate(0deg);
-            /* IE 9 */
-            transform: rotate(0deg);
-            /* Firefox 16+, IE 10+, Opera */
-          }
-
-          100% {
-            -webkit-transform: rotate(360deg);
-            /* Chrome, Opera 15+, Safari 3.1+ */
-            -ms-transform: rotate(360deg);
-            /* IE 9 */
-            transform: rotate(360deg);
-            /* Firefox 16+, IE 10+, Opera */
-          }
-        }
-
-        #loader-wrapper .loader-section {
-          position: fixed;
-          top: 0;
-          width: 51%;
-          height: 100%;
-          background: #5d94f8;
-          /* Old browsers */
-          z-index: 1000;
-          -webkit-transform: translateX(0);
-          /* Chrome, Opera 15+, Safari 3.1+ */
-          -ms-transform: translateX(0);
-          /* IE 9 */
-          transform: translateX(0);
-          /* Firefox 16+, IE 10+, Opera */
-        }
-
-        #loader-wrapper .loader-section.section-left {
-          left: 0;
-        }
-
-        #loader-wrapper .loader-section.section-right {
-          right: 0;
-        }
-
-        /* Loaded */
-        .loaded #loader-wrapper .loader-section.section-left {
-          -webkit-transform: translateX(-100%);
-          /* Chrome, Opera 15+, Safari 3.1+ */
-          -ms-transform: translateX(-100%);
-          /* IE 9 */
-          transform: translateX(-100%);
-          /* Firefox 16+, IE 10+, Opera */
-          -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-        }
-
-        .loaded #loader-wrapper .loader-section.section-right {
-          -webkit-transform: translateX(100%);
-          /* Chrome, Opera 15+, Safari 3.1+ */
-          -ms-transform: translateX(100%);
-          /* IE 9 */
-          transform: translateX(100%);
-          /* Firefox 16+, IE 10+, Opera */
-          -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-          transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-        }
-
-        .loaded #loader {
-          opacity: 0;
-          -webkit-transition: all 0.3s ease-out;
-          transition: all 0.3s ease-out;
-        }
-
-        .loaded #loader-wrapper {
-          visibility: hidden;
-          -webkit-transform: translateY(-100%);
-          /* Chrome, Opera 15+, Safari 3.1+ */
-          -ms-transform: translateY(-100%);
-          /* IE 9 */
-          transform: translateY(-100%);
-          /* Firefox 16+, IE 10+, Opera */
-          -webkit-transition: all 0.3s 1s ease-out;
-          transition: all 0.3s 1s ease-out;
-        }
-
-        /* JavaScript Turned Off */
-        .no-js #loader-wrapper {
-          display: none;
-        }
-
-        .no-js h1 {
-          color: #222222;
-        }
-
-        #loader-wrapper .load_title {
-          font-family: 'Open Sans';
-          color: #FFF;
-          font-size: 19px;
-          width: 100%;
-          text-align: center;
-          z-index: 9999999999999;
-          position: absolute;
-          top: 60%;
+      @keyframes antSpinMove {
+        to {
           opacity: 1;
-          line-height: 30px;
         }
+      }
 
-        #loader-wrapper .load_title span {
-          font-weight: normal;
-          font-style: italic;
-          font-size: 13px;
-          color: #FFF;
-          opacity: 0.5;
+      @-webkit-keyframes antSpinMove {
+        to {
+          opacity: 1;
         }
+      }
     </style>
-    <div id="loader-wrapper">
-      <div id="loader"></div>
-      <div class="loader-section section-left"></div>
-      <div class="loader-section section-right"></div>
-      <div class="load_title">加载中,请耐心等待...
-        <br>
-        <span id="version">V0.0.1</span>
+    <div class="app-loading">
+      <div class="app-loading-wrap">
+        <div class="app-loading-dots">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+        <div class="app-loading-title">vue-pure-admin</div>
       </div>
     </div>
   </div>
