DEV Community

Cover image for Clean Loading Animation
Jatin Sharma
Jatin Sharma

Posted on

Clean Loading Animation

#css #webdev #beginners #tutorial

In this article, we are going to build another loading animation with pure CSS. First, let's look at what are we building -

preview

Now let's look at the code now -

HTML 

<div class="loading_container"> <div class="loading"></div> <h3>loading...</h3> </div>
Enter fullscreen mode Exit fullscreen mode

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%); }
Enter fullscreen mode Exit fullscreen mode

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.😊👇
buymecoffee

Also Read

Top comments (0)