插件描述：6种CSS3炫酷预加载Loading，非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。
实现方法
这是一组效果非常酷的纯CSS3炫酷预加载Loading指示器动画特效。这组loading指示器共6种效果，都是使用:before和:after伪元素，以及CSS帧动画来完成各种不同的预加载指示器动画。
使用方法
音频波形Loading动画
HTML结构
使用5个空的<span>元素，每一个代表一条波形柱子。
|
1
2
3
4
5
6
7
|
<
div
id
=
"preloader_1"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
|
CSS样式
音频波形Loading动画效果通过使每一条音频波形柱子的高度从5像素变化到30像素来完成。每一个span元素都被沿Y轴向下移动15像素，使动画动中心开始。
|
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
|
#preloader_
1
{
position
:
relative
;
}
#preloader_
1
span{
display
:
block
;
bottom
:
0px
;
width
:
9px
;
height
:
5px
;
background
:
#9b59b6
;
position
:
absolute
;
animation: preloader_
1
1.5
s infinite ease-in-out;
}
#preloader_
1
span:nth-child(
2
){
left
:
11px
;
animation-delay: .
2
s;
}
#preloader_
1
span:nth-child(
3
){
left
:
22px
;
animation-delay: .
4
s;
}
#preloader_
1
span:nth-child(
4
){
left
:
33px
;
animation-delay: .
6
s;
}
#preloader_
1
span:nth-child(
5
){
left
:
44px
;
animation-delay: .
8
s;
}
@keyframes preloader_
1
{
0%
{
height
:
5px
;transform:translateY(
0px
);
background
:
#9b59b6
;}
25%
{
height
:
30px
;transform:translateY(
15px
);
background
:
#3498db
;}
50%
{
height
:
5px
;transform:translateY(
0px
);
background
:
#9b59b6
;}
100%
{
height
:
5px
;transform:translateY(
0px
);
background
:
#9b59b6
;}
}
|
通过分别为每一个span元素设置0.2秒的animation-delay动画延迟时间，使它们依次产生高度变化的动画效果。
圆形变矩形Loading动画
HTML结构
圆形变矩形Loading动画使用4个空的<span>元素，每一个代表一个圆形/矩形。
|
1
2
3
4
5
6
|
<
div
id
=
"preloader_2"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
|
CSS样式
该loading指示器动画通过修改border-radius属性来实现。
|
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
|
#preloader_
2
{
position
:
relative
;
left
:
50%
;
width
:
40px
;
height
:
40px
; }
#preloader_
2
span {
display
:
block
;
bottom
:
0px
;
width
:
20px
;
height
:
20px
;
background
:
#9b59b6
;
position
:
absolute
; }
#preloader_
2
span:nth-child(
1
) { animation: preloader_
2
_
1
1.5
s infinite ease-in-out; }
#preloader_
2
span:nth-child(
2
) {
left
:
20px
; animation: preloader_
2
_
2
1.5
s infinite ease-in-out; }
#preloader_
2
span:nth-child(
3
) {
top
:
0px
; animation: preloader_
2
_
3
1.5
s infinite ease-in-out; }
#preloader_
2
span:nth-child(
4
) {
top
:
0px
;
left
:
20px
; animation: preloader_
2
_
4
1.5
s infinite ease-in-out; }
@-keyframes preloader_
2
_
1
{
0%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
0
deg);
border-radius:
0px
;
}
50%
{
-transform: translateX(
-20px
) translateY(
-10px
) rotate(
-180
deg);
border-radius:
20px
;
background
:
#3498db
;
}
80%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
-360
deg);
border-radius:
0px
;
}
100%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
-360
deg);
border-radius:
0px
;
}
}
@-keyframes preloader_
2
_
2
{
0%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
0
deg);
border-radius:
0px
;
}
50%
{
-transform: translateX(
20px
) translateY(
-10px
) rotate(
180
deg);
border-radius:
20px
;
background
:
#f1c40f
;
}
80%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
360
deg);
border-radius:
0px
;
}
100%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
360
deg);
border-radius:
0px
;
}
}
@-keyframes preloader_
2
_
3
{
0%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
0
deg);
border-radius:
0px
;
}
50%
{
-transform: translateX(
-20px
) translateY(
10px
) rotate(
-180
deg);
border-radius:
20px
;
background
:
#2ecc71
;
}
80%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
-360
deg);
border-radius:
0px
;
}
100%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
-360
deg);
border-radius:
0px
;
}
}
@-keyframes preloader_
2
_
4
{
0%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
0
deg);
border-radius:
0px
;
}
50%
{
-transform: translateX(
20px
) translateY(
10px
) rotate(
180
deg);
border-radius:
20px
;
background
:
#e74c3c
;
}
80%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
360
deg);
border-radius:
0px
;
}
100%
{
-transform: translateX(
0px
) translateY(
0px
) rotate(
360
deg);
border-radius:
0px
;
}
}
|
交叉图形变换Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
|
1
|
<
div
id
=
"preloader_3"
></
div
>
|
CSS样式
|
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
|
#preloader_
3
{
position
:
relative
;
}
#preloader_
3:
before{
width
:
20px
;
height
:
20px
;
border-radius:
20px
;
background
:
blue
;
content
:
''
;
position
:
absolute
;
background
:
#9b59b6
;
animation: preloader_
3
_before
1.5
s infinite ease-in-out;
}
#preloader_
3:
after{
width
:
20px
;
height
:
20px
;
border-radius:
20px
;
background
:
blue
;
content
:
''
;
position
:
absolute
;
background
:
#2ecc71
;
left
:
22px
;
animation: preloader_
3
_after
1.5
s infinite ease-in-out;
}
@keyframes preloader_
3
_before {
0%
{transform: translateX(
0px
) rotate(
0
deg)}
50%
{transform: translateX(
50px
) scale(
1.2
) rotate(
260
deg);
background
:
#2ecc71
;border-radius:
0px
;}
100%
{transform: translateX(
0px
) rotate(
0
deg)}
}
@keyframes preloader_
3
_after {
0%
{transform: translateX(
0px
)}
50%
{transform: translateX(
-50px
) scale(
1.2
) rotate(
-260
deg);
background
:
#9b59b6
;border-radius:
0px
;}
100%
{transform: translateX(
0px
)}
}
|
蛇形Loading动画
HTML结构
该loading动画使用div元素的:before和:after为元素来制作。圆形变方形的动画通用是通过修改border-radius属性来实现。
|
1
2
3
4
5
6
7
|
<
div
id
=
"preloader_4"
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
<
span
></
span
>
</
div
>
|
CSS样式
该动画通过修改每一个span元素的Y轴位置，使它们下移10个像素，并使它们的颜色从蓝色变为黄色。阴影效果则是修改box-shadow的尺寸来完成。
|
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
|
#preloader_
4
{
position
:
relative
;
}
#preloader_
4
span{
position
:
absolute
;
width
:
20px
;
height
:
20px
;
background
:
#3498db
;
opacity:
0.5
;
border-radius:
20px
;
-animation: preloader_
4
1
s infinite ease-in-out;
}
#preloader_
4
span:nth-child(
2
){
left
:
20px
;
animation-delay: .
2
s;
}
#preloader_
4
span:nth-child(
3
){
left
:
40px
;
animation-delay: .
4
s;
}
#preloader_
4
span:nth-child(
4
){
left
:
60px
;
animation-delay: .
6
s;
}
#preloader_
4
span:nth-child(
5
){
left
:
80px
;
animation-delay: .
8
s;
}
@keyframes preloader_
4
{
0%
{
opacity:
0.3
;
transform:translateY(
0px
);
box-shadow:
0px
0px
3px
rgba(
0
,
0
,
0
,
0.1
);}
50%
{
opacity:
1
;
transform: translateY(
-10px
);
background
:
#f1c40f
;
box-shadow:
0px
20px
3px
rgba(
0
,
0
,
0
,
0.05
);}
100%
{
opacity:
0.3
;
transform:translateY(
0px
);
box-shadow:
0px
0px
3px
rgba(
0
,
0
,
0
,
0.1
);}
}
|
旋转轮盘Loading动画
HTML结构
该loading动画使用div元素来制作中心的圆形，并使用div元素的:after伪元素来制作两条旋转线效果。
|
1
|
<
div
id
=
"preloader_5"
></
div
>
|
CSS样式
两条旋转线使用:after伪元素来制作，通过给它设置50像素的顶部和底部border-radius俩创建这两条线。动画效果添加在div元素上，修改它的颜色以及通过transform: rotate()来使它进行旋转。
|
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
|
#preloader
5
{
position
:
relative
;
width
:
30px
;
|