Sign inSign up

6 CSS3 Loading Animations

Add-ons
2026-07-26 00:34 5 次浏览 • 0 次下载 4.1KB
6 CSS3 Loading Animations

Implementation

This is a collection of visually impressive pure CSS3 preloading Loading indicator animations. It includes 6 different loading effects, all created using :before and :after pseudo-elements and CSS keyframe animations to produce various preloading indicator effects.

Usage

Audio Waveform Loading Animation

HTML Structure

Uses 5 empty <span> elements, each representing a waveform bar.

1
2
3
4
5
6
7
<div id="preloader_1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS Styles

The audio waveform Loading animation is created by changing the height of each waveform bar from 5 pixels to 30 pixels. Each span element is moved downward by 15 pixels along the Y-axis, making the animation originate from the center.

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.5s infinite ease-in-out;
}
#preloader_1 span:nth-child(2){
left:11px;
animation-delay: .2s;
}
#preloader_1 span:nth-child(3){
left:22px;
animation-delay: .4s;
}
#preloader_1 span:nth-child(4){
left:33px;
animation-delay: .6s;
}
#preloader_1 span:nth-child(5){
left:44px;
animation-delay: .8s;
}
@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;}
}

An animation-delay of 0.2 seconds is set for each span element individually, causing them to animate sequentially as their heights change.

Circle-to-Rectangle Loading Animation

HTML Structure

The Circle-to-Rectangle Loading animation uses 4 empty <span> elements, each representing a circle/rectangle.

1
2
3
4
5
6
<div id="preloader_2">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS Styles

This loading indicator animation is implemented by modifying the border-radius property.

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.5s infinite ease-in-out; }
#preloader_2 span:nth-child(2) { left: 20px; animation: preloader_2_2 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(3) { top: 0px; animation: preloader_2_3 1.5s infinite ease-in-out; }
#preloader_2 span:nth-child(4) { top: 0px; left: 20px; animation: preloader_2_4 1.5s infinite ease-in-out; }
@-keyframes preloader_2_1 {
0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
50% {
-transform: translateX(-20px) translateY(-10px) rotate(-180deg);
border-radius:20px;
background:#3498db;
}
80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_2 {
0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
50% {
-transform: translateX(20px) translateY(-10px) rotate(180deg);
border-radius:20px;
background:#f1c40f;
}
80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_3 {
0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
50% {
-transform: translateX(-20px) translateY(10px) rotate(-180deg);
border-radius:20px;
background:#2ecc71;
}
80% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
100% {
-transform: translateX(0px) translateY(0px) rotate(-360deg);
border-radius:0px;
}
}
@-keyframes preloader_2_4 {
0% {
-transform: translateX(0px) translateY(0px) rotate(0deg);
border-radius:0px;
}
50% {
-transform: translateX(20px) translateY(10px) rotate(180deg);
border-radius:20px;
background:#e74c3c;
}
80% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
100% {
-transform: translateX(0px) translateY(0px) rotate(360deg);
border-radius:0px;
}
}

Cross Shape Transformation Loading Animation

HTML Structure

This loading animation is created using the :before and :after pseudo-elements of a div element. The circle-to-square transformation is also implemented by modifying the border-radius property.

1
<div id="preloader_3"></div>

CSS Styles

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.5s 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.5s infinite ease-in-out;
}
@keyframes preloader_3_before {
0% {transform: translateX(0px) rotate(0deg)}
50% {transform: translateX(50px) scale(1.2) rotate(260deg); background:#2ecc71;border-radius:0px;}
100% {transform: translateX(0px) rotate(0deg)}
}
@keyframes preloader_3_after {
0% {transform: translateX(0px)}
50% {transform: translateX(-50px) scale(1.2) rotate(-260deg);background:#9b59b6;border-radius:0px;}
100% {transform: translateX(0px)}
}

Snake Loading Animation

HTML Structure

This loading animation is created using the :before and :after pseudo-elements of a div element. The circle-to-square transformation is also implemented by modifying the border-radius property.

1
2
3
4
5
6
7
<div id="preloader_4">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS Styles

This animation is created by changing the Y-axis position of each span element, moving them downward by 10 pixels while changing their colors from blue to yellow. The shadow effect is achieved by modifying the dimensions of 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 1s infinite ease-in-out;
}
#preloader_4 span:nth-child(2){
left:20px;
animation-delay: .2s;
}
#preloader_4 span:nth-child(3){
left:40px;
animation-delay: .4s;
}
#preloader_4 span:nth-child(4){
left:60px;
animation-delay: .6s;
}
#preloader_4 span:nth-child(5){
left:80px;
animation-delay: .8s;
}
@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);}
}

Spinning Wheel Loading Animation

HTML Structure

This loading animation uses a div element to create the central circle and the :after pseudo-element of the div to create two rotating lines.

1
<div id="preloader_5"></div>

CSS Styles

The two rotating lines are created using the :after pseudo-element, with top and bottom border-radius values of 50 pixels to form the lines. The animation is applied to the div element, changing its color and rotating it using 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
#preloader5{
position:relative;
width:30px;
height:30px;
background:#3498db;
border-radius:50px;
animation: preloader_5 1.5s infinite linear;
}
#preloader5:after{
position:absolute;
width:50px;
height:50px;
border-top:10px solid #9b59b6;
border-bottom:10px solid #9b59b6;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-radius:50px;
content:'';
top:-20px;
left:-20px;
animation: preloader_5_after 1.5s infinite linear;
}
@keyframes preloader_5 {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);background:#2ecc71;}
100% {transform: rotate(360deg);}
}
@keyframes preloader_5_after {
0% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
50% {border-top:10px solid #3498db;border-bottom:10px solid #3498db;}
100% {border-top:10px solid #9b59b6;border-bottom:10px solid #9b59b6;}
}

Windows Logo Loading Animation

HTML Structure

Each span represents a square.

1
2
3
4
5
6
<div id="preloader_6">
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS Styles

All squares are arranged in a grid layout. An animation is applied to the main div element to make it rotate. Another animation continuously scales each span element from 100% to 50%. The animation-delay property controls the delay for each span element.

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
#preloader_6{
position:relative;
width: 42px;
height: 42px;
animation: preloader_6 5s infinite linear;
}
#preloader_6 span{
width:20px;
height:20px;
position:absolute;
background:red;
display:block;
animation: preloader_6_span 1s infinite linear;
}
#preloader_6 span:nth-child(1){
background:#2ecc71;
}
#preloader_6 span:nth-child(2){
left:22px;
background:#9b59b6;
animation-delay: .2s;
}
#preloader_6 span:nth-child(3){
top:22px;
background:#3498db;
animation-delay: .4s;
}
#preloader_6 span:nth-child(4){
top:22px;
left:22px;
background:#f1c40f;
animation-delay: .6s;
}
@keyframes preloader_6 {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@keyframes preloader_6_span {
0% { transform:scale(1); }
50% { transform:scale(0.5); }
100% { transform:scale(1); }
}
评论
星河码客

发现和分享优质开源项目，传承互联网精神，为开发者服务。

关于本站

部署服务

关于我们

隐私政策

侵权投诉

站长：IT小君

粤ICP备20043561号

2016-2046 © 星河码客

联系我们

微信/广告合作：ITcloub (备注星河码客)

免责声明：本站资源版权归原作者所有，仅供学习与交流。如有侵权，请通过「关于我们 - 侵权投诉」联系删除。

Powered by Nuxt · Deployed on Cloudflare