查看 | 历史 | 提交 | 提交对比
admin
2024-07-05 7597c63fa8a1384c452873ff1fd9d471d8ad1237
提交 | 用户 | 时间
0ca254 1 <!DOCTYPE html>
A 2 <html>
3   <head>
4     <meta charset="utf-8">
5     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6     <meta name="renderer" content="webkit">
7     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
8     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
9     <title><%= webpackConfig.name %></title>
10     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
11       <style>
12     html,
13     body,
14     #app {
15       height: 100%;
16       margin: 0px;
17       padding: 0px;
18     }
19     .chromeframe {
20       margin: 0.2em 0;
21       background: #ccc;
22       color: #000;
23       padding: 0.2em 0;
24     }
25
26     #loader-wrapper {
27       position: fixed;
28       top: 0;
29       left: 0;
30       width: 100%;
31       height: 100%;
32       z-index: 999999;
33     }
34
35     #loader {
36       display: block;
37       position: relative;
38       left: 50%;
39       top: 50%;
40       width: 150px;
41       height: 150px;
42       margin: -75px 0 0 -75px;
43       border-radius: 50%;
44       border: 3px solid transparent;
45       border-top-color: #FFF;
46       -webkit-animation: spin 2s linear infinite;
47       -ms-animation: spin 2s linear infinite;
48       -moz-animation: spin 2s linear infinite;
49       -o-animation: spin 2s linear infinite;
50       animation: spin 2s linear infinite;
51       z-index: 1001;
52     }
53
54     #loader:before {
55       content: "";
56       position: absolute;
57       top: 5px;
58       left: 5px;
59       right: 5px;
60       bottom: 5px;
61       border-radius: 50%;
62       border: 3px solid transparent;
63       border-top-color: #FFF;
64       -webkit-animation: spin 3s linear infinite;
65       -moz-animation: spin 3s linear infinite;
66       -o-animation: spin 3s linear infinite;
67       -ms-animation: spin 3s linear infinite;
68       animation: spin 3s linear infinite;
69     }
70
71     #loader:after {
72       content: "";
73       position: absolute;
74       top: 15px;
75       left: 15px;
76       right: 15px;
77       bottom: 15px;
78       border-radius: 50%;
79       border: 3px solid transparent;
80       border-top-color: #FFF;
81       -moz-animation: spin 1.5s linear infinite;
82       -o-animation: spin 1.5s linear infinite;
83       -ms-animation: spin 1.5s linear infinite;
84       -webkit-animation: spin 1.5s linear infinite;
85       animation: spin 1.5s linear infinite;
86     }
87
88
89     @-webkit-keyframes spin {
90       0% {
91         -webkit-transform: rotate(0deg);
92         -ms-transform: rotate(0deg);
93         transform: rotate(0deg);
94       }
95       100% {
96         -webkit-transform: rotate(360deg);
97         -ms-transform: rotate(360deg);
98         transform: rotate(360deg);
99       }
100     }
101
102     @keyframes spin {
103       0% {
104         -webkit-transform: rotate(0deg);
105         -ms-transform: rotate(0deg);
106         transform: rotate(0deg);
107       }
108       100% {
109         -webkit-transform: rotate(360deg);
110         -ms-transform: rotate(360deg);
111         transform: rotate(360deg);
112       }
113     }
114
115
116     #loader-wrapper .loader-section {
117       position: fixed;
118       top: 0;
119       width: 51%;
120       height: 100%;
121       background: #7171C6;
122       z-index: 1000;
123       -webkit-transform: translateX(0);
124       -ms-transform: translateX(0);
125       transform: translateX(0);
126     }
127
128     #loader-wrapper .loader-section.section-left {
129       left: 0;
130     }
131
132     #loader-wrapper .loader-section.section-right {
133       right: 0;
134     }
135
136
137     .loaded #loader-wrapper .loader-section.section-left {
138       -webkit-transform: translateX(-100%);
139       -ms-transform: translateX(-100%);
140       transform: translateX(-100%);
141       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
142       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
143     }
144
145     .loaded #loader-wrapper .loader-section.section-right {
146       -webkit-transform: translateX(100%);
147       -ms-transform: translateX(100%);
148       transform: translateX(100%);
149       -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
150       transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
151     }
152
153     .loaded #loader {
154       opacity: 0;
155       -webkit-transition: all 0.3s ease-out;
156       transition: all 0.3s ease-out;
157     }
158
159     .loaded #loader-wrapper {
160       visibility: hidden;
161       -webkit-transform: translateY(-100%);
162       -ms-transform: translateY(-100%);
163       transform: translateY(-100%);
164       -webkit-transition: all 0.3s 1s ease-out;
165       transition: all 0.3s 1s ease-out;
166     }
167
168     .no-js #loader-wrapper {
169       display: none;
170     }
171
172     .no-js h1 {
173       color: #222222;
174     }
175
176     #loader-wrapper .load_title {
177       font-family: 'Open Sans';
178       color: #FFF;
179       font-size: 19px;
180       width: 100%;
181       text-align: center;
182       z-index: 9999999999999;
183       position: absolute;
184       top: 60%;
185       opacity: 1;
186       line-height: 30px;
187     }
188
189     #loader-wrapper .load_title span {
190       font-weight: normal;
191       font-style: italic;
192       font-size: 13px;
193       color: #FFF;
194       opacity: 0.5;
195     }
196   </style>
197   </head>
198   <body>
199     <div id="app">
200         <div id="loader-wrapper">
201             <div id="loader"></div>
202             <div class="loader-section section-left"></div>
203             <div class="loader-section section-right"></div>
204             <div class="load_title">正在加载系统资源，请耐心等待</div>
205         </div>
206     </div>
207   </body>
208 </html>