1 changed files with 186 additions and 14 deletions
Split View
Diff Options
-
+186 -14public/index.html
+ 186
- 14
public/index.html
View File
| @ -1,16 +1,188 @@ | |||
| <!DOCTYPE html> | |||
| <html lang=""> | |||
| <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"> | |||
| <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> | |||
| </body> | |||
| </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"> | |||
| <link rel="icon" href="<%= BASE_URL %>favicon.ico"> | |||
| <title> | |||
| <%= htmlWebpackPlugin.options.title %> | |||
| </title> | |||
| <style> | |||
| html, | |||
| body, | |||
| #app { | |||
| height: 100%; | |||
| margin: 0px; | |||
| padding: 0px; | |||
| } | |||
| .chromeframe { | |||
| margin: 0.2em 0; | |||
| background: #ccc; | |||
| color: #000; | |||
| padding: 0.2em 0; | |||
| } | |||
| #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; | |||
| border-top-color: #409eff; | |||
| -webkit-animation: spin 2s linear infinite; | |||
| -ms-animation: spin 2s linear infinite; | |||
| -moz-animation: spin 2s linear infinite; | |||
| -o-animation: spin 2s linear infinite; | |||
| animation: spin 2s linear infinite; | |||
| z-index: 1001; | |||
| } | |||
| #loader:before { | |||
| content: ""; | |||
| position: absolute; | |||
| top: 5px; | |||
| left: 5px; | |||
| right: 5px; | |||
| bottom: 5px; | |||
| border-radius: 50%; | |||
| border: 3px solid transparent; | |||
| border-top-color: #409eff; | |||
| -webkit-animation: spin 3s linear infinite; | |||
| -moz-animation: spin 3s linear infinite; | |||
| -o-animation: spin 3s linear infinite; | |||
| -ms-animation: spin 3s linear infinite; | |||
| animation: spin 3s linear infinite; | |||
| } | |||
| #loader:after { | |||
| content: ""; | |||
| position: absolute; | |||
| top: 15px; | |||
| left: 15px; | |||
| right: 15px; | |||
| bottom: 15px; | |||
| border-radius: 50%; | |||
| border: 3px solid transparent; | |||
| border-top-color: #409eff; | |||
| -moz-animation: spin 1.5s linear infinite; | |||
| -o-animation: spin 1.5s linear infinite; | |||
| -ms-animation: spin 1.5s linear infinite; | |||
| -webkit-animation: spin 1.5s linear infinite; | |||
| animation: spin 1.5s linear infinite; | |||
| } | |||
| @-webkit-keyframes spin { | |||
| 0% { | |||
| -webkit-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| @keyframes spin { | |||
| 0% { | |||
| -webkit-transform: rotate(0deg); | |||
| -ms-transform: rotate(0deg); | |||
| transform: rotate(0deg); | |||
| } | |||
| 100% { | |||
| -webkit-transform: rotate(360deg); | |||
| -ms-transform: rotate(360deg); | |||
| transform: rotate(360deg); | |||
| } | |||
| } | |||
| #loader-wrapper .loader-section { | |||
| position: fixed; | |||
| top: 0; | |||
| width: 51%; | |||
| height: 100%; | |||
| background: linear-gradient(180deg, #327e77, #2c9b92 46%, #1e524d); | |||
| z-index: 1000; | |||
| -webkit-transform: translateX(0); | |||
| -ms-transform: translateX(0); | |||
| transform: translateX(0); | |||
| } | |||
| #loader-wrapper .loader-section.section-left { | |||
| left: 0; | |||
| } | |||
| #loader-wrapper .loader-section.section-right { | |||
| right: 0; | |||
| } | |||
| .loaded #loader-wrapper .loader-section.section-left { | |||
| -webkit-transform: translateX(-100%); | |||
| -ms-transform: translateX(-100%); | |||
| transform: translateX(-100%); | |||
| -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%); | |||
| -ms-transform: translateX(100%); | |||
| transform: translateX(100%); | |||
| -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%); | |||
| -ms-transform: translateY(-100%); | |||
| transform: translateY(-100%); | |||
| -webkit-transition: all 0.3s 1s ease-out; | |||
| transition: all 0.3s 1s ease-out; | |||
| } | |||
| .no-js #loader-wrapper { | |||
| display: none; | |||
| } | |||
| .no-js h1 { | |||
| color: #222222; | |||
| } | |||
| #loader-wrapper .load_title { | |||
| font-family: 'PingFangSC-Semibold, PingFang SC'; | |||
| color: #409eff; | |||
| font-size: 19px; | |||
| width: 100%; | |||
| text-align: center; | |||
| z-index: 9999999999999; | |||
| position: absolute; | |||
| top: 60%; | |||
| opacity: 1; | |||
| line-height: 30px; | |||
| } | |||
| </style> | |||
| </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 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">正在加载系统资源，请耐心等待</div> | |||
| </div> | |||
| </div> | |||
| </body> | |||
| </html> | |||