Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 the users stay engaged while they wait for a website to load. There are multiple animations that one can add to a web page or application, one popular type of loading animation is the rotating shape loader. This animation has good features in which a shape is spinning continuously until the web page is fully loaded.
Moving ahead, we are going to use a different approach to rotate the shape loader animation with different examples.
Approach
Our approach to rotating a shape loader animation using CSS consists of multiple steps. Let’s discuss the steps in detail to rotate the shape loader animation.
Step 1: Create a div with a class
The first step is to create an HTML markup for the shape that we want to rotate. For now, we are creating a shape using a simple div element with a class name loader.
<div class="loader"></div>
Step 2: Adding CSS styles
Let’s create a loader with some width and height −
.loader {
width: 50px;
height: 50px;
}
Step 3: Creating a shape
Now we need to add the shape that we want to rotate. For this example, we will use a circle. We can use the border-radius property to create a circle. We can also set the border and border-color to give the circle a solid color.
.loader {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #0055ff;
border-top-color: transparent;
}
Step 4: Adding animation
To create the rotation animation, we can use the CSS animation property. We can create a keyframe animation using the @keyframes rule. In this example, we will use a 360-degree rotation animation.
.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);
}
}
Step 5: Some add-ons
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
.loader-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
p {
font-size: 18px;
margin-top: 20px;
}
The loader-container element is set to display as flex, with justify-content and align-items set to center to center the loader element on the page. The flex-direction is set to column, and the height is set to 100vh to make the loader-container element fill the height of the viewport.
Example 1
In the first approach, we used a container element a div with a class of loader-container to center the loader and display loading text beneath it. This approach is useful if you want to display additional content along with the loader, such as a message that the page is loading.
<!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;
}
</style>
</head>
<body>
<div class="loader-container">
<div class="loader"></div>
<p>Loading...</p>
</div>
</body>
</html>
Output
In this example, we've created a basic HTML document with a title tag and a single div element that serves as our loader container. Within that container, we've added a div element with a class of "loader" that will be our rotating shape.
We've also added some CSS styling to the loader and loader-container elements. The loader is given a width and height, and a border that forms a circle. The border-top-color is set to transparent so that we only see three-quarters of the circle. We've also added an animation property to the loader element that uses the "rotation" keyframes we defined to create the spinning animation.
The loader-container element is set to display as flex with justify-content and align-items set to center, which centers the loader element on the page. We've also added some text below the loader to let the user know that the page is still loading.
Example 2
In this example, we have simply used a single element, div with a class of loader to create the loader animation. The example uses an approach that is more minimalistic and focused purely on the loader itself. It is useful if you want a simple and clean loader animation that doesn't require additional content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rotating Square Loader Animation</title>
<style>
.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>
Output
In this example, we've removed the border and border-radius properties from the loader element and instead given it a width and height of 60 pixels, along with a background color of blue (#0055ff).
We've kept the keyframe animation the same, rotating the loader element from 0 to 360 degrees over the course of one second. This creates a spinning square loader animation that's a bit different from the previous circular loader examples.
You can experiment with different shapes, colors, and animation durations to customize your loader animation to fit your website's design.
Conclusion
In this article, we have seen two CSS approaches that use the same keyframe animation to rotate the loader element in HTML. If we talk about the main difference in both, then that will show the loader element is styled, as in our first approach we have used borders and border-radius to create a circular shape, and in the second approach uses a background color to create a square shape.
Lastly, the choice to select which example to use depend on the specific needs and preferences. If there’s any need to display additional content along with the loader, we can use the first approach as it is more suitable and If there is a need to add a minimalistic loader animation, then the second approach becomes a good option.
2K+ Views
