How to make preloader, create spinner only html css.

Today We will create preloader with the help of html css.

first we write  html code , so first create one "div" give class "loader" div inside create another dic keep class "left" then inside the left one another div create that class name "right" and the last one is also require class "center"

youer Html structure should like this

<div class="loader">

<div class="left">

<div class="right">

<div class="center"></div>

</div>

</div>

</div>

ofter completing the html code let's start the css code

first design background , color of background black.

*{

padding: 0;

margin: 0;

box-sizing: border-box;

}

body{

background: black;

}

now design the div which we give class loader

.loader{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

we add in this div animation property for animate to div

.left{

width: 200px;

height: 200px;

background: cyan;

display: flex;

justify-content: center;

align-items: center;

animation: rote 4s steps(5, end) infinite;

}

.right{

width: 150px;

height: 150px;

background: black;

display: flex;

justify-content: center;

align-items: center;

transform: rotate(45deg);

animation: rot 1s steps(5, end) infinite;

}

.center{

width: 50px;

height: 50px;

background:cyan;

transform: rotate(45deg);

animation: rota 4s steps(5, end) infinite;

}

@keyframes is the css property that is uses for animation of your design 

@keyframes rote{

0%{

border-radius: 0%;

}

100%{

/*transform: rotate(-380deg);*/

border-radius: 50%;

}

}

@keyframes rot{

0%{

border-radius: 2%;

}

100%{

transform: rotate(380deg);

border-radius: 50%;

}

}

@keyframes rota{

0%{

border-radius: 0%;

}

100%{

transform: rotate(-380deg);

border-radius: 50%;

}

}

Now completed your project run your file in browser.