avatar

css早期练习 7种常见loadding

加载动画

使用了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
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
<style>
.load-container1 {
position: relative;
width: 100px;
height: 100px;
margin: 0 auto;
}

.load-container1 .boxLoading {
width: 50px;
height: 50px;
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

.load-container1 .boxLoading::before {
content: "";
width: 50px;
height: 5px;
background: #000;
opacity: 0.1;
position: absolute;
top: 59px;
left: 0;
border-radius: 50%;
animation: shadow 0.5s linear infinite;
}

.load-container1 .boxLoading::after {
content: "";
width: 50px;
height: 50px;
background: #00adb5;
animation: animate 0.5s linear infinite;
position: absolute;
top: 0;
left: 0;
border-radius: 3px;
}

@keyframes animate {
17% {
border-bottom-right-radius: 3px;
}

25% {
transform: translateY(9px) rotate(22.5deg);
}

50% {
transform: translateY(18px) scale(1, 0.9) rotate(45deg);
border-bottom-right-radius: 40px;
}

75% {
transform: translateY(9px) rotate(67.5deg);
}

100% {
transform: translateY(0) rotate(90deg);
}
}

@keyframes shadow {

0%,
100% {
transform: scale(1, 1);
}

50% {
transform: scale(1.2, 1);
}
}
</style>

<div class="load-container1">
<div class="boxLoading"></div>
</div>

第二种

效果

实现代码

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
<style>
.load-container2 {
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
height: 150px;
}

#load {
width: 75px;
animation: loading 3s linear infinite;
}

#loading-inner {
/* stroke: {
dashoffset: 0;
dasharray: 300;
width: 10;
miterlimit: 10;
linecap: round;
} */
stroke-dashoffset: 0;
stroke-dasharray: 300;
stroke-width: 10;
stroke-miterlimit: 10;
stroke-linecap: round;
-webkit-animation: loading-circle 2s linear infinite;
animation: loading-circle 2s linear infinite;
stroke: #00adb5;
fill: transparent;
}

@keyframes loading {
0% {
transform: rotate(0);
}

100% {
transform: rotate(360deg);
}
}

@keyframes loading-circle {
0% {
stroke-dashoffset: 0;
}

100% {
stroke-dashoffset: -600;
}
}
</style>

<div class="load-container2">
<svg id="load" x="0px" y="0px" viewBox="0 0 150 150"><circle id="loading-inner" cx="75" cy="75" r="60"/></svg>
</div>

第三种

效果

实现代码

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
<style>
.load3 {
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
border-radius: 50%;
overflow: hidden;
background-color: rgba(0, 169, 178, .2);
;
}

.load3::before {
content: "";
width: 70px;
height: 70px;
background-color: #00adb5;
position: absolute;
left: 50%;
bottom: 50%;
z-index: 1;
transform-origin: left bottom;
animation: rotate 1.5s infinite linear;
}

.load3::after {
content: "";
width: 40px;
height: 40px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #fff;
z-index: 2;
border-radius: 50%;
}

@keyframes rotate {
0% {
transform: rotate(0);
}

50% {
transform: rotate(180deg);
}

100% {
transform: rotate(360deg);
}
}
</style>
<div class="load3"></div>

第四种

效果

实现代码

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

<style>
.load-container4 {
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}

.load-container4 .container {
width: 50px;
height: 60px;
text-align: center;
font-size: 10px;
}

.load-container4 .container .boxLoading {
background-color: #00adb5;
height: 100%;
width: 6px;
display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}

.load-container4 .container .boxLoading2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.load-container4 .container .boxLoading3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.load-container4 .container .boxLoading4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.load-container4 .container .boxLoading5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {

0%,
40%,
100% {
-webkit-transform: scaleY(0.4)
}

20% {
-webkit-transform: scaleY(1.0)
}
}

@keyframes stretchdelay {

0%,
40%,
100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
}

20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>

<div class="load-container4">
<div class="container">
<div class="boxLoading boxLoading1"></div>
<div class="boxLoading boxLoading2"></div>
<div class="boxLoading boxLoading3"></div>
<div class="boxLoading boxLoading4"></div>
<div class="boxLoading boxLoading5"></div>
</div>
</div>

第五种

效果

实现代码

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

<style>
.load-container5 {
width: 60px;
height: 60px;
background-color: #00adb5;

margin: 50px auto;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
0% {
-webkit-transform: perspective(120px)
}

50% {
-webkit-transform: perspective(120px) rotateY(180deg)
}

100% {
-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
}
}

@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
}

50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
}

100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
</style>

<div class="load-container5"></div>

第六种

效果

实现代码

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

<style>
.load-container6 {
margin: 50px auto;
width: 150px;
text-align: center;
}

.load-container6 .load {
width: 20px;
height: 20px;
background-color: #00adb5;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.load-container6 .load1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}

.load-container6 .load2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {

0%,
80%,
100% {
-webkit-transform: scale(0.0)
}

40% {
-webkit-transform: scale(1.0)
}
}

@keyframes bouncedelay {

0%,
80%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}

40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>

<div class="load-container6">
<div class="load load1"></div>
<div class="load load2"></div>
<div class="load"></div>
</div>

第七种

效果

实现代码

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

<style>
.load-container7 {
margin: 50px auto;
width: 48px;
height: 48px;
position: relative;
}

.load-container7 .container {
position: absolute;
width: 100%;
height: 100%;
}

.load-container7 .container .circle {
width: 12px;
height: 12px;
background-color: #00adb5;

border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.load-container7 .container .circle1 {
top: 0;
left: 0;
}

.load-container7 .container .circle2 {
top: 0;
right: 0;
}

.load-container7 .container .circle3 {
right: 0;
bottom: 0;
}

.load-container7 .container .circle4 {
left: 0;
bottom: 0;
}

.load-container7 .container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}

.load-container7 .container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}

.load-container7 .container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}

.load-container7 .container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}

.load-container7 .container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}

.load-container7 .container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}

.load-container7 .container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}

.load-container7 .container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}

.load-container7 .container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}

.load-container7 .container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}

.load-container7 .container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}

.load-container7 .container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}

.load-container7 .container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}


@-webkit-keyframes bouncedelay {

0%,
80%,
100% {
-webkit-transform: scale(0.0)
}

40% {
-webkit-transform: scale(1.0)
}
}

@keyframes bouncedelay {

0%,
80%,
100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
}

40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
</style>

<div class="load-container7">
<div class="container container1">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
</div>
<div class="container container2">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
</div>
<div class="container container3">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
<div class="circle circle3"></div>
<div class="circle circle4"></div>
</div>
</div>
文章作者: 张复明
文章鏈接: https://hexo.zhangaming.com/2020/04/07/css-loadding/
版權聲明: 本博客所有文章除特別聲明外,均採用 CC BY-NC-SA 4.0 許可協議。轉載請註明來自 阿明的博客
打賞
  • 微信
    微信
  • 支付寶
    支付寶

評論