Hello everyone. In this quick tutorial, let's learn how to create a loading spinner using pure CSS in 3 easy steps!
Step 1 - HTML
Create the HTML structure we need (which is just 1 line)
<div class="spinner"></div>
Step 2 - Add basic styles.
.spinner{
width: 64px;
height: 64px;
border: 8px solid;
border-color: #3d5af1 transparent #3d5af1 transparent;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
Step 3 - Add the spin animation
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
That's it! we have created the loading spinner. Here is the final result.
Thank u๐
Top comments (15)
You can simplify your keyframes
Hey, thanks. ๐
I didn't know about this trick.
How does it work? Is it like we can skip original state of the element at 0%?
if 0% or 100% is not defined then the default element style will get used
Hey gaurav thanks for sharing bro I have just recently learned CSS animation course from scrimba and I can understand this codes ๐๐
Thanks buddy! Glad u liked it๐
โ๏ธ
Nice one!!
Thanks๐
Itโs simple and nice CSS loading ..! Thanks..
Thank u ๐
Beaty and simple.
Thanks.
Thanks for sharing its simple .
Good thanks
Some comments may only be visible to logged-in visitors. Sign in to view all comments.