Html
1 <body class="is-loading"> 2 <div class="curtain"> 3 <div class="loader"> 4 loading... 5 </div> 6 </div> 7 <div> 8 <!--这里 正文 --> 9 </div> 10 </body>
Css
1 .loader {
2 position: fixed;
3 left: 50%;
4 top: 50%;
5 margin: -0.2em 0 0 -0.2em;
6 text-indent: -9999em;
7 border-top: 0.3em solid rgba(0, 0, 0, 0.1);
8 border-right: 0.3em solid rgba(0, 0, 0, 0.1);
9 border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
10 border-left: 0.3em solid #555;
11 -moz-transform: translateZ(0);
12 -webkit-transform: translateZ(0);
13 transform: translateZ(0);
14 -moz-animation: loader 300ms infinite linear;
15 -webkit-animation: loader 300ms infinite linear;
16 animation: loader 300ms infinite linear;
17 -moz-transition: all 500ms ease;
18 -o-transition: all 500ms ease;
19 -webkit-transition: all 500ms ease;
20 transition: all 500ms ease;
21 }
22
23 .loader,
24 .loader:after {
25 border-radius: 50%;
26 width: 2em;
27 height: 2em;
28 }
29
30 .curtain {
31 position: fixed;
32 width: 100%;
33 height: 100%;
34 top: 0;
35 left: 0;
36 background-color: white;
37 -moz-transition: all 600ms ease;
38 -o-transition: all 600ms ease;
39 -webkit-transition: all 600ms ease;
40 transition: all 600ms ease;
41 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
42 opacity: 0;
43 z-index: 0;
44 overflow: hidden;
45 }
46
47 @-webkit-keyframes loader {
48 0% {
49 -webkit-transform: rotate(0deg);
50 transform: rotate(0deg);
51 }
52 100% {
53 -webkit-transform: rotate(360deg);
54 transform: rotate(360deg);
55 }
56 }
57
58 @-moz-keyframes loader {
59 0% {
60 -moz-transform: rotate(0deg);
61 transform: rotate(0deg);
62 }
63 100% {
64 -moz-transform: rotate(360deg);
65 transform: rotate(360deg);
66 }
67 }
68
69 @keyframes loader {
70 0% {
71 -webkit-transform: rotate(0deg);
72 transform: rotate(0deg);
73 }
74 100% {
75 -webkit-transform: rotate(360deg);
76 transform: rotate(360deg);
77 }
78 }
79
80 .is-loading {
81 overflow: hidden;
82 }
83
84 .is-loading .curtain {
85 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
86 opacity: 1;
87 z-index: 99;
88 }
89
90 .is-loading .loader {
91 filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
92 opacity: 1;
93 }
Js
1 window.οnlοad=function(){
2
3 $('body').removeClass('is-loading');
4 }