In this article, we are going to build another loading animation with pure CSS. First, let's look at what are we building -
Now let's look at the code now -
HTML
<div class="loading_container">
<div class="loading"></div>
<h3>loading...</h3>
</div>
We have the main div with class loading_container and it has two children loading and h3.
-
loading- It is the main loader for this animation -
h3: it is the text which you can see in the preview
CSS
/* Outer Loading Container */
.loading_container {
position: relative;
width: 200px;
height: 200px;
border-radius: 150px;
}
/* Loader */
.loading {
width: 100%;
height: 100%;
border-radius: 150px;
border-right: 0.3rem solid white;
animation: animate 2s linear infinite;
}
/* Animation */
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
/* loading text */
.loading_container > h3 {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Conclusion
So after that you can use it anywhere in your project. And let me know what do you think about it. If you like it then consider a follow.
You can now extend your support by buying me a Coffee.😊👇
Top comments (0)