CSS loader in Five Easy Steps
Creating a loader from scratch is a best way to learn CSS Animations. If you want to create a loader for your website or something that you can use for your project, you can follow the following five steps:
To start with this tutorial, you require a basic knowledge of HTML5 and CSS3.
Step 1:
Writing a loader box
A webpage is a collection of boxes. Our first task is to create a box on our page.
Here, we are adding this image on the page, which will create a box. You can use any image of your choice in the src as shown below:
<body>
<img class="loader" src="http://s3.thingpic.com/images/XU/8xaRy6tPVYfGiGYrcC8wePXJ.png" alt="loader">
</body>
Step 2:
Positioning the loader
Now Our HTML code is ready and we need to start writing our CSS code. First we will provide height and width to our loader image and put our loader at the center of the page.
.loader {
width: 100px;
height: 100px;
display: block;
margin: 140px auto;
}
We can see a box at the center of the page containing an image like this:
Step 3:
Adding animation to the box
We need to associate this box with the animation-name, animation-timing and animation-iteration-count.
.loader {
width: 100px;
height: 100px;
background-color: red;
display: block;
margin: 140px auto;
animation-name: shape;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Step 4:
Writing the stages
After we have written the animation name, we have to associate a keyframe with the animation name.
Inside the keyframe, we will add various stages for this animation. By adding stages, you break the animation into multiple states. You define these stages in percentages.
Note: The name of our animation here is shape, which you have defined above.
@keyframes shape {
0% {
border-radius: 50% 50% 50% 50%;
transform: rotate(0deg);
}
30% {
border-radius: 50% 50% 50% 0;
transform: rotate(30deg);
}
50% {
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
70% {
border-radius: 50% 0 0 0;
transform: rotate(120deg);
}
100% {
border-radius: 0 0 0 0;
transform: rotate(180deg);
}
}
After adding all rotations and border-radius within different percentages, we finally have our loader ready.
Step 5
Running the animation
After following the above four steps, we can link the following CSS file with the HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader</title>
<link href="loader.css" rel="stylesheet">
</head>
<img class="loader" src="http://s3.thingpic.com/images/XU/8xaRy6tPVYfGiGYrcC8wePXJ.png" alt="loader">
</body>
</html>
.loader {
width: 100px;
height: 100px;
background-color: red;
display: block;
margin: 140px auto;
animation-name: shape;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes shape {
0% {
border-radius: 50% 50% 50% 50%;
transform: rotate(0deg);
}
30% {
border-radius: 50% 50% 50% 0;
transform: rotate(30deg);
}
50% {
border-radius: 50% 50% 0 0;
transform: rotate(90deg);
}
70% {
border-radius: 50% 0 0 0;
transform: rotate(120deg);
}
100% {
border-radius: 0 0 0 0;
transform: rotate(180deg);
}
}
Open the HTML file to see the loader
