页面预加载loading动画，再载入内容

默认情况下如果网站请求速度慢，所以会有一段时间的空白页面等等，用户体验效果不好，见到很多的页面都有预加载的效果，加载之前先加载一个动画，后台进程继续加载页面内容，当页面内容加载完之后再退出动画显示内容，这样的用户体验更好。

例如此链接：http://crusader12.com/C12HoverAlls/

这篇文章是从上面链接的内容上拔下来的，操作流程很简单，只有两部如下

首先定义一个loader.css文件，如下内容

.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;    /* COLOR 1 */    border-top-color: #FFF;    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */    -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */     -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */           animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */    z-index:1001;}#loader:before {        content: "";        position: absolute;        top: 5px;        left: 5px;        right: 5px;        bottom: 5px;        border-radius: 50%;        border: 3px solid transparent;        /* COLOR 2 */               border-top-color: #FFF;        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */                      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}#loader:after {        content: "";        position: absolute;        top: 15px;        left: 15px;        right: 15px;        bottom: 15px;        border-radius: 50%;        border: 3px solid transparent;        border-top-color: #FFF;        /* COLOR 3 */               -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */                -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}@-webkit-keyframes spin {        0%{             -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(0deg);  /* IE 9 */            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */        }100%{            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(360deg);  /* IE 9 */            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}}@keyframes spin {        0%{             -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(0deg);  /* IE 9 */            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */        }100%{            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: rotate(360deg);  /* IE 9 */            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}}#loader-wrapper .loader-section {        position: fixed;        top: 0;        width: 51%;        height: 100%;        background: #1abc9c; /* Old browsers */        z-index: 1000;        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */        -ms-transform: translateX(0);  /* IE 9 */        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}#loader-wrapper .loader-section.section-left {left: 0;}#loader-wrapper .loader-section.section-right {right: 0;}/* Loaded */.loaded #loader-wrapper .loader-section.section-left {        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateX(-100%);  /* IE 9 */                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */        -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%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateX(100%);  /* IE 9 */                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */        -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%);  /* Chrome, Opera 15+, Safari 3.1+ */            -ms-transform: translateY(-100%);  /* IE 9 */                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */        -webkit-transition: all 0.3s 1s ease-out;                  transition: all 0.3s 1s ease-out;}/* JavaScript Turned Off */.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;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

第二步：在网站页面header标签和body标签加入以下代码

// 引入jquery <!--页面加载start--><link rel="stylesheet" type="text/css" href="css/loader.min.css"><script type="text/javascript">             // 等待所有加载    $(window).load(function(){        $('body').addClass('loaded');        $('#loader-wrapper .load_title').remove();    }); </script>    <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">正在加载LoveFeel站点<br><span>V1.0</span></div></div><!--页面加载end-->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

HoverAlls页面源码如下操作，他先是加载一段json封装之后再显示内容的，我上面的代码省去了json的操作。

$(window).load(function(){    $('body').addClass('loaded').Chameleon({        'current_item':'hoveralls',        'json_url':'../Envato/items.json'    });    $('#loader-wrapper .load_title').remove();}); 
1
2
3
4
5
6
7
1
2
3
4
5
6
7

当然也可以访问我的页面看看效果 
http://lovefeel.top/marry/

查看原文：http://www.ibloger.net/article/401.html

相关阅读：

30种CSS3炫酷页面预加载loading动画特效（推荐）：http://www.ibloger.net/article/1558.html 
Loaders.css 多种纯CSS加载进度动画效果：http://www.ibloger.net/article/1568.html 
load-awesome 53种纯CSS3预加载页面loading指示器动画特：效http://www.ibloger.net/article/1800.html 
CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效：http://www.ibloger.net/article/1556.html 
按钮特效 基于SVG和Segment.js的Loading加载：http://www.ibloger.net/article/1554.html