Will create a super bouncing loader in css .
First we need to create 3 dots , to create a loader.
<div class = "loader">
<div></div>
<div></div>
<div></div>
</div>
Add some css to make the div to fill whole screen.
Set the loader as flex-box and set all div inside loader to
- center vertically using
align-items: center - center horizontally using
justify-content: center;
body {
margin : 0; //set margin to zero
}
loader {
width : 100vw;
height : 100vh;
display : flex;
justify-content: center; //make all div to center horizontally
align-items : center; //this makes all div to center vertically.
}
Now , convert all the div into dot or circle shape by setting border radius to 50%;
loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%; // make the div looks like circle
margin : 3px;//for space between each circle
}
Now let’s add an animation by using keyframes. In keyframe we define to state(finish state) of the animation .
In the to state we define animation as the div to be translated x -20px and opacity to 0 so that it give an effect of fading.
@keyframes loader {
to {
opacity: 0.1;
transform: translate(0, -20px);
background : pink;
}
}
Now add the animation to the div inside the loader . Also add delay to each div so that it looks great.
.loader > div {
width: 20px;
height: 20px;
background: #8385aa;
border-radius: 50%;
margin : 3px;
animation: loader 0.6s infinite alternate;
}
// add delay
.loader > div:nth-child(2) {
animation-delay: 0.2s;
}
.loader > div:nth-child(3) {
animation-delay: 0.4s;
}
That’s it we have developed a super simple awesome 😎 loader in css 👍 .
Follow Javascript Jeep🚙 for more interesting posts🥶.
Js Jeep 🚙 