| | |
|---|
| | | <!DOCTYPE html>
|
|---|
| | | <html>
|
|---|
| | | <head>
|
|---|
| | | <meta charset="utf-8">
|
|---|
| | | <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><%= webpackConfig.name %></title>
|
|---|
| | | <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
|
|---|
| | | <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: #FFF;
|
|---|
| | | -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: #FFF;
|
|---|
| | | -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: #FFF;
|
|---|
| | | -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: #7171C6;
|
|---|
| | | 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: 'Open Sans';
|
|---|
| | | color: #FFF;
|
|---|
| | | font-size: 19px;
|
|---|
| | | width: 100%;
|
|---|
| | | text-align: center;
|
|---|
| | | z-index: 9999999999999;
|
|---|
| | | position: absolute;
|
|---|
| | | top: 60%;
|
|---|
| | | opacity: 1;
|
|---|
| | | line-height: 30px;
|
|---|
| | | }
|
|---|
| | |
|
|---|
| | | #loader-wrapper .load_title span {
|
|---|
| | | font-weight: normal;
|
|---|
| | | font-style: italic;
|
|---|
| | | font-size: 13px;
|
|---|
| | | color: #FFF;
|
|---|
| | | opacity: 0.5;
|
|---|
| | | }
|
|---|
| | | </style>
|
|---|
| | | </head>
|
|---|
| | | <body>
|
|---|
| | | <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>
|
|---|
| | | <!DOCTYPE html> |
|---|
| | | <html> |
|---|
| | | <head> |
|---|
| | | <meta charset="utf-8"> |
|---|
| | | <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><%= webpackConfig.name %></title> |
|---|
| | | <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> |
|---|
| | | <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: #FFF; |
|---|
| | | -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: #FFF; |
|---|
| | | -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: #FFF; |
|---|
| | | -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: #7171C6; |
|---|
| | | 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: 'Open Sans'; |
|---|
| | | color: #FFF; |
|---|
| | | font-size: 19px; |
|---|
| | | width: 100%; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 9999999999999; |
|---|
| | | position: absolute; |
|---|
| | | top: 60%; |
|---|
| | | opacity: 1; |
|---|
| | | line-height: 30px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | #loader-wrapper .load_title span { |
|---|
| | | font-weight: normal; |
|---|
| | | font-style: italic; |
|---|
| | | font-size: 13px; |
|---|
| | | color: #FFF; |
|---|
| | | opacity: 0.5; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
| | | <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> |
|---|
