How to Rotate Shape Loader Animation using CSS ?
Last Updated :
17 Oct, 2024
Improve
A rotating shape loader animation in CSS refers to an animated element, such as a circle or square, that spins continuously to indicate loading or processing. This is achieved using the @keyframes rule and CSS properties like transform: rotate() to create smooth, spinning animations.
rotate shape loader animation Preview:
rotating shape loader animation
Creating rotating shape loader animation
- HTML Structure: It contains a title, heading, and a loader with three .box divs inside a .loader container.
- Centering Loader: The body uses display: grid and place-items: center to center content vertically and horizontally.
- Loader Design: The .loader uses display: flex with a gap property to evenly space the .box elements.
- Rotation Animation: The .box divs use @keyframes rotate to animate a 180-degree rotation continuously every 3 seconds.
- Gradient and Delay: Each box has a linear gradient change mid-animation and uses animation delay to create staggered starts.
Example
<!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:
