Pure css+html Making Web page loading animation

We all know that the loading of the webpage takes a certain amount of time,

Even as we strive to optimize the efficiency of code execution and compress files,

But it still takes time, and if nothing happens on the surface during this period,

The user will have a worse experience,

But if there is an animation or a progress bar,

That's totally different.

This article shares the pure css+html loading animation code

The HTML code is as follows

<DivID= "Start-screen">        <Divclass= "In-start">            <Divclass= "First"></Div>            <Divclass= "Second"></Div>            <Divclass= "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 Thi{0% {Top:25px; Left:0; }25%{Top:25px; Left:25px; }50%{Top:0; Left:25px; }75%{Top:0; Left:0; }}

View Code

HTML{Height: -%;}
Body{Height: -%;}
#start-screen{Height: -%;width: -%;Background-color:#ccc;Opacity: the%;position:fixed;Z-index:999;}
. In-start{Height: -px;width: -px;position:Absolute;Margin-top:-45px;Margin-left:-25px;Top: -%; Left: -%;}
. In-start . First,. In-start . Second,. In-start . Third{Height: -px;width: -px;position:Absolute;float: Left;Border-radius: -%;}
. First{Background-color:#ff0;Animation: Fir1s Linear 0.1s Infinite;Top:0; Left:0;}
. Second{Background-color:#0f0;Animation: sec1s Linear 0.2s Infinite;Top:0; Left: -px;}
. Third{Background-color:#00f;Animation: Thi1s Linear 0s Infinite;Top: -px; Left:0;}
@keyframes Fir{0% {Top:0; Left:0; } 25% {Top: -px; Left:0; } 50% {Top: -px; Left: -px; } 75% {Top:0px; Left: -px; }}
@keyframes sec{0% {Top:0; Left: -px; } 25% {Top:0; Left:0; } 50% {Top: -px; Left:0; } 75% {Top: -px; Left: -px; }}
@keyframes Thi{0% {Top: -px; Left:0; } 25% {Top: -px; Left: -px; } 50% {Top:0; Left: -px; } 75% {Top:0; Left:0; }}

Pure css+html Making Web page loading animation