|
@@ -1,17 +1,113 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="">
|
|
|
- <head>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
<meta charset="utf-8">
|
|
|
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
+ <meta name="renderer" content="webkit">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
|
- <title><%= htmlWebpackPlugin.options.title %></title>
|
|
|
- </head>
|
|
|
- <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>
|
|
|
- <!-- built files will be auto injected -->
|
|
|
- </body>
|
|
|
+ <title><%= webpackConfig.name %></title>
|
|
|
+ <style>
|
|
|
+ html,
|
|
|
+ body,
|
|
|
+ #app {
|
|
|
+ height: 100%;
|
|
|
+ margin: 0px;
|
|
|
+ padding: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 999999;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ #loader-wrapper .load_title {
|
|
|
+ font-family: 'Open Sans';
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 19px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 9999999999999;
|
|
|
+ position: absolute;
|
|
|
+ top: 49%;
|
|
|
+ opacity: 1;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes mounthAni {
|
|
|
+ 40% {
|
|
|
+ stroke-dasharray: 44, 22;
|
|
|
+ /* 间距改为1/4 */
|
|
|
+ }
|
|
|
+
|
|
|
+ 80%,
|
|
|
+ 100% {
|
|
|
+ stroke-dasharray: 44, 44;
|
|
|
+ /* 间距恢复为1/2 */
|
|
|
+ transform: rotate(720deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes eyeAni {
|
|
|
+ 40% {
|
|
|
+ stroke-dasharray: 0, 77;
|
|
|
+ /* 间距改为7/8 */
|
|
|
+ }
|
|
|
+
|
|
|
+ 80%,
|
|
|
+ 100% {
|
|
|
+ transform: rotate(675deg);
|
|
|
+ /* 间距恢复为3/4 */
|
|
|
+ stroke-dasharray: 0, 66;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes dash {
|
|
|
+ 0% {
|
|
|
+ stroke-dashoffset: 2000;
|
|
|
+ }
|
|
|
+
|
|
|
+ 90% {
|
|
|
+ stroke-dashoffset: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes loading22 {
|
|
|
+ 60% {
|
|
|
+ stroke-dashoffset: 1000;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ stroke-dashoffset: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="app">
|
|
|
+ <div id="loader-wrapper">
|
|
|
+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px"
|
|
|
+ viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
|
|
|
+ <path opacity="0.2" fill="rgba(73,125,235,1)"
|
|
|
+ d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
|
|
|
+ s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
|
|
|
+ c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
|
|
|
+ <path fill="rgba(73,125,235,1)" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
|
|
|
+ C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
|
|
|
+ <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
|
|
|
+ to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
|
|
|
+ </path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
</html>
|