Hello everyone, In this article we are going to create Loading Animation with the use of simple CSS.
Take a look of what we are designing
HTML
It's the simplest part of this project.
<body>
<div class="loader"></div>
</body>
That's it for HTML.
CSS
To align the loader in center
body{
display: grid;
place-items: center;
height: 90vh;
}
Now styling the Loader
.loader {
border: 10px solid #f3f3f3;
border-top: 10px solid #3498db;
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 1s linear infinite;
}
Now adding keyframes
to animate the loader
@keyframes spin {
0% { transform: rotate(0deg);
border-top: 10px solid blue;
}
25%{transform: rotate(90deg);
border-top: 10px solid green;
}
50%{transform: rotate(180deg);
border-top: 10px solid yellow;
}
75%{transform: rotate(270deg);
border-top: 10px solid red;
}
100% { transform: rotate(360deg);
border-top: 10px solid blue;
}
}
Our desired Loader Animation is ready.
Oldest comments (3)
Could you explain, where it would gather information about the loading percentage?
This is just CSS animation. For loading percentage you have to use Js
Thanks ☺️