初始化项目

public/index.html

@@ -1,17 +1,88 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
+    <title>
+        <%= htmlWebpackPlugin.options.title %>
+    </title>
+</head>
+<style>
+    html,
+    body,
+    #app {
+        height: 100%;
+    }
+    
+    .loading-page {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        overflow: hidden;
+    }
+    
+    .hz-loading {
+        display: inline-block;
+        width: 80px;
+        height: 80px;
+        position: relative;
+    }
+    
+    .hz-loading-icon {
+        width: 40px;
+        height: 40px;
+        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAwBQTFRFgpGXrbOyTU9IAwgABwgCeIWF////////1NPf////WWBd////////bHd0////////////////////////////////////////////////////////////HR0RKSkf////QT02////ISMdEhIH////////////LjAoAAAAJzVPtWdnOkdohKfBiXhQbH+ewNjjY3OBoJNylTEvvFNUUiILlYCM+OHZyru6wGRlxG9t1L3DkaCqmJOOk4p/saa1nLTAXl9wX1Vj+fTrvLq2VS8d/NzJt77FnZqVkGpYqZiNraKbTzYrOTQ3oExIkXJhoGJSekEx6sq5vMrQkZeZhI6WrLjBw8LAuaqlZTQfklpIqn9oZmx139PKpYt7p6ekOSgo3t3bVz4wS0VJgXt1SlVYCBEObVVJ17qr5OTkra+qQSESFhIUd21ptYp3aD4wv5ySoIFu0dHQLCAYa01Av7StkJKPM0RBiG9jVFtYrIh4pI6FoKGfemZajXhsFBoa0sOziWRVtLWyYGpsSjozmYN6g04+cW1kKDIvvqadsZeGnXZni4uJvKiTGxMGMz47QiwieYGJ1MvCRTQukn50f4KAf2xoQk5Oel9KUT42O0lHMjk2+Pj4o3Zfr499YlNNcnV2ent5UVlhiIJ8WkU9nW1Y38CxbWZgNikf7O3sHSUgMCYbPzcsXF5ZaVpUbF9abGtpKBoNW05I4rykxKKNISMdya6jPDUwWEtFRUdAr4VvNDcwQkNABAUAY2ViuJyMDA0EGhULRDwyt455zbikuZN+U1RRcHFuS01HOzEsSj85UU9HeXZwAAAALjAqzKiYOTEnWVNLQDgyLzQxxaWXMSwkUVJMYmFaKCIXIx4TPD47JCgiKSgmCQoAEBMLv5eCJy0pHSAZyq2b0LCjWldST0Q/wZyIHyAVIyIXYVlTOjowEQ8DSklBNS8mKSoeJSYbRDw3Hx0SKyYcPj40HRkOQkM5ODUrLC4jUUlDSEQ8GRwRNDQpMTEmLyogFRMIFhgO////h1RoqgAAACl0Uk5T7e7t7e3tfID7wuqJ3+156KzWzDALknRfGCK47k3t7fjtbO7uoD5X7QCJRCThAAAQhUlEQVRYw5XYBVRb2boA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 truncated
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-color: #f1b7d2;
+        border-radius: 50%;
+        overflow: hidden;
+        margin: 20px auto;
+    }
+    
+    .hz-loading:after {
+        content: " ";
+        display: block;
+        width: 80px;
+        height: 80px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        border: 4px solid #f1b7d2;
+        border-color: #f1b7d2 transparent #f1b7d2 transparent;
+        animation: xtbg-loading 1.3s linear infinite;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
+    
+    @keyframes xtbg-loading {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+</style>
+
+<body>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app">
+        <div class="loading-page">
+            <div class="hz-loading">
+                <div class="hz-loading-icon"></div>
+            </div>
+        </div>
+    </div>
     <!-- built files will be auto injected -->
-  </body>
-</html>
+</body>
+
+</html>