Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to rotate shape loader animation using CSS?
In this article, we'll see how to rotate shape loader animation using CSS. Loading animations of different shapes is an essential part of a web app as it helps users stay engaged while they wait for a website to load. One popular type is the rotating shape loader, where a shape spins continuously until the web page is fully loaded.
Moving ahead, we are going to use different approaches to rotate shape loader animations with various examples.
Syntax
.loader {
animation: rotation duration timing-function iteration-count;
}
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Approach
Our approach to rotating a shape loader animation using CSS consists of multiple steps
Step 1: Create a div with a class
Create an HTML markup for the shape that we want to rotate using a simple div element with a class name loader.
Step 2: Adding CSS styles
Set width and height for the loader element to define its dimensions.
Step 3: Creating a shape
Add the shape using CSS properties. For a circle, use border-radius: 50%. For a square, use a background color.
Step 4: Adding animation
Use the CSS animation property with @keyframes to create a 360-degree rotation effect.
Example 1: Circular Loader with Loading Text
This approach uses a container element to center the loader and display loading text beneath it
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Shape Loader Animation</title>
<style>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
p {
font-size: 18px;
margin-top: 20px;
color: #333;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
</body>
</html>
A blue circular spinner with a transparent top section rotates continuously in the center of the page with "Loading..." text below it.
Example 2: Simple Square Loader
This example uses a single div element to create a minimalistic rotating square loader
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Square Loader Animation</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.loader {
width: 60px;
height: 60px;
background-color: #0055ff;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>
A blue square rotates continuously around its center point in the middle of the page.
Key Points
| Property | Purpose |
|---|---|
animation |
Applies the rotation effect to the loader |
@keyframes |
Defines the rotation from 0deg to 360deg |
linear |
Creates smooth, constant rotation speed |
infinite |
Makes the animation loop continuously |
Conclusion
CSS rotating shape loaders are created using the animation property with @keyframes for smooth rotation effects. You can customize the shape, colors, and timing to match your website's design needs.
3K+ Views
