How to rotate shape loader animation using CSS ?
Last Updated :
09 Jan, 2023
Minimal shape rotating loader is a basic CSS animation, where we will make a loader animation with 3 box shapes, & they will be rotated in the right direction by 180 degrees and rotate back to 0 degree & will keep running for an infinite time period. In this article, we will see how to rotate the square shape loader animation using CSS.
Approach: The following approach will be utilized to create shape rotating loader animation, which is described below:
- Make the loader with a div with the class name loader.
- Make three child span elements for the shape, here we will be making it square-shaped, these are named box.
- Style the parent loader element with display flex and gap between the child element with 0.6rem.
- Style the box, style the width, height, and background color, and add the animation of rotation with an infinite time period.
- Add the animation-delay to the 2nd and 3rd box for a smooth and unique effect.
- Make the keyframes at 50% for the rotation of the boxes to 180 degree.
Example: This example describes the shape-rotating loader animation using HTML & CSS.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
body {
display: grid;
place-items: center;
}
.loader {
display: flex;
gap: 0.6rem;
}
.box {
width: 50px;
height: 50px;
background: #0043bc;
animation: rotate 3s infinite;
}
.box:nth-child(2) {
animation-delay: 0.25s;
}
.box:nth-child(3) {
animation-delay: 0.5s;
}
@keyframes rotate {
50% {
transform: rotate(180deg);
background: rgb(0, 112, 255);
background: linear-gradient(90deg,
rgba(0, 112, 255, 1) 45%,
rgba(0, 67, 188, 1) 100%);
}
}
</ style >
</ head >
< body >
< h1 style = "color:green" >
GeeksforGeeks
</ h1 >
< h2 style = "color:green" >
Minimal shape rotating Loader
</ h2 >
< div class = "loader" >
< div class = "box" ></ div >
< div class = "box" ></ div >
< div class = "box" ></ div >
</ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...