perf(全局布局): 修改欲加载loading效果

jiayisheji · Dec 4, 2017 · 9193ae9 · 9193ae9
1 parent 500f727
commit 9193ae9
Showing 1 changed file with 84 additions and 95 deletions.
diff --git a/src/index.html b/src/index.html
@@ -2,104 +2,93 @@
 <html lang="en">
 
 <head>
-    <meta charset="utf-8">
-    <title>Ng4AdminPro</title>
-    <base href="/">
+  <meta charset="utf-8">
+  <title>Ng4AdminPro</title>
+  <base href="/">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 
 <body>
-    <app-root>
-        <style>
-            @-webkit-keyframes spin {
-                0% {
-                    transform: rotate(0)
-                }
-                100% {
-                    transform: rotate(360deg)
-                }
-            }
-
-            @-moz-keyframes spin {
-                0% {
-                    -moz-transform: rotate(0)
-                }
-                100% {
-                    -moz-transform: rotate(360deg)
-                }
-            }
-
-            @keyframes spin {
-                0% {
-                    transform: rotate(0)
-                }
-                100% {
-                    transform: rotate(360deg)
-                }
-            }
-
-            .spinner {
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                z-index: 1003;
-                background: #000000;
-                overflow: hidden
-            }
-
-            .spinner div:first-child {
-                display: block;
-                position: relative;
-                left: 50%;
-                top: 50%;
-                width: 150px;
-                height: 150px;
-                margin: -75px 0 0 -75px;
-                border-radius: 50%;
-                box-shadow: 0 3px 3px 0 rgba(255, 56, 106, 1);
-                transform: translate3d(0, 0, 0);
-                animation: spin 2s linear infinite
-            }
-
-            .spinner div:first-child:after,
-            .spinner div:first-child:before {
-                content: '';
-                position: absolute;
-                border-radius: 50%
-            }
-
-            .spinner div:first-child:before {
-                top: 5px;
-                left: 5px;
-                right: 5px;
-                bottom: 5px;
-                box-shadow: 0 3px 3px 0 rgb(255, 228, 32);
-                -webkit-animation: spin 3s linear infinite;
-                animation: spin 3s linear infinite
-            }
-
-            .spinner div:first-child:after {
-                top: 15px;
-                left: 15px;
-                right: 15px;
-                bottom: 15px;
-                box-shadow: 0 3px 3px 0 rgba(61, 175, 255, 1);
-                animation: spin 1.5s linear infinite
-            }
-        </style>
-        <div class="spinner">
-            <div class="blob blob-0"></div>
-            <div class="blob blob-1"></div>
-            <div class="blob blob-2"></div>
-            <div class="blob blob-3"></div>
-            <div class="blob blob-4"></div>
-            <div class="blob blob-5"></div>
-        </div>
-    </app-root>
+  <app-root></app-root>
+  <div id="app-loading">
+    <style type="text/css">
+      body,
+      html,
+      #app-loading {
+        height: 100%;
+        overflow: hidden;
+        background: #f0f2f5;
+      }
+
+      .app-loading {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      .app-loading .spinner {
+        height: 200px;
+        width: 200px;
+        animation: rotate 2s linear infinite;
+        transform-origin: center center;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: auto;
+      }
+
+      .app-loading .spinner .path {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+        animation: dash 1.5s ease-in-out infinite;
+        stroke-linecap: round;
+        stroke: #ddd;
+      }
+
+      @keyframes rotate {
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      @keyframes dash {
+        0% {
+          stroke-dasharray: 1, 200;
+          stroke-dashoffset: 0;
+        }
+        50% {
+          stroke-dasharray: 89, 200;
+          stroke-dashoffset: -35px;
+        }
+        100% {
+          stroke-dasharray: 89,
+          200;
+          stroke-dashoffset: -124px;
+        }
+      }
+
+      .logo {
+        width: 100px;
+        height: 100px;
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==) center center no-repeat;
+      }
+
+    </style>
+    <div class="app-loading">
+      <div class="logo"></div>
+      <svg class="spinner" viewBox="25 25 50 50">
+        <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
+      </svg>
+    </div>
+  </div>
+
 </body>
 
-</html>
+</html>