We all know that loading a web page takes a certain amount of time,
Even though we are working hard to optimize code execution efficiency and compress files,
But it still takes time, and if nothing happens on the surface during that time,
Users will have a poorer experience,
But if there is an animation or a progress bar,
that would be completely different,
This article shares pure CSS+HTML loading animation code
HTML code is as follows
<div id="start-screen"> <div class="in-start"> <div class="first"></div> <div class="second"></div> <div class="third"></div> </div> </div>
The CSS code is as follows:
html { height: 100%; } body { height: 100%; } #start-screen { height: 100%; width: 100%; background-color: #ccc; opacity: 80%; position: fixed; z-index: 999; } .in-start { height: 50px; width: 50px; position: absolute; margin-top: -45px; margin-left: -25px; top: 50%; left: 50%; } .in-start .first, .in-start .second, .in-start .third { height: 25px; width: 25px; position: absolute; float: left; border-radius: 50%; } .first { background-color: #ff0; animation: fir 1s linear 0.1s infinite; top: 0; left: 0; } .second { background-color: #0f0; animation: sec 1s linear 0.2s infinite; top: 0; left: 25px; } .third { background-color: #00f; animation: thi 1s linear 0s infinite; top: 25px; left: 0; } @keyframes fir { 0% { top: 0; left: 0; } 25% { top: 25px; left: 0; } 50% { top: 25px; left: 25px; } 75% { top: 0px; left: 25px; } } @keyframes sec { 0% { top: 0; left: 25px; } 25% { top: 0; left: 0; } 50% { top: 25px; left: 0; } 75% { top: 25px; left: 25px; } } @keyframes exam { 0% { top: 25px; left: 0; } 25% { top: 25px; left: 25px; } 50% { top: 0; left: 25px; } 75% { top: 0; left: 0; } }
html
{
height
:
100
%
;
}
body
{
height
:
100
%
;
}
#start-screen
{
height
:
100
%
;
width
:
100
%
;
background-color
:
#ccc
;
opacity
:
80
%
;
position
:
fixed
;
z-index
:
999
;
}
.in-start
{
height
:
50
px
;
width:
50
px;
position:
absolute;
margin-top:
-45
px;
margin-left:
-25
px;
top:
50
%;
left:
50
%;
}
.in-start
.first,
.in-start
.second,
.in-start
.third {
height:
25
px;
width:
25
px;
position:
absolute;
float:
left;
border-radius:
50
%;
}
.first {
background-color:
#ff0;
animation: fir
1
s
linear
0.1
s
infinite;
top:
0;
left:
0;
}
.second {
background-color:
#0f0;
animation: sec
1
s
linear
0.2
s
infinite;
top:
0;
left:
25
px;
}
.third {
background-color:
#00f;
animation: thi
1
s
linear
0
s
infinite;
top:
25
px;
left:
0;
}
@keyframes
fir {
0% {
top:
0;
left:
0;
}
25% {
top:
25
px;
left:
0;
}
50% {
top:
25
px;
left:
25
px;
}
75% {
top:
0
px;
left:
25
px;
}
}
@keyframes
sec {
0% {
top:
0;
left:
25
px;
}
25% {
top:
0;
left:
0;
}
50% {
top:
25
px;
left:
0;
}
75% {
top:
25
px;
left:
25
px;
}
}
@keyframes
thi {
0% {
top:
25
px;
left:
0;
}
25% {
top:
25
px;
left:
25
px;
}
50% {
top:
0;
left:
25
px;
}
75% {
top:
0;
left:
0;
}
}