DEV Community

Rohit Sharma
Rohit Sharma

Posted on

Simple Loader Animation with CSS

#beginners #css #webdev #tutorial

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>
Enter fullscreen mode Exit fullscreen mode

That's it for HTML.

CSS

To align the loader in center

 body{ display: grid; place-items: center; height: 90vh; }
Enter fullscreen mode Exit fullscreen mode

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

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

Our desired Loader Animation is ready.

If you love it♥ then show some love.
Buy Me A Coffee

Top comments (3)

Collapse
 
devrohit0 profile image
Rohit Sharma •

Thanks ☺️

Collapse
 
maybenoobish profile image
Matthias Kluth •

Could you explain, where it would gather information about the loading percentage?

Collapse
 
devrohit0 profile image
Rohit Sharma •

This is just CSS animation. For loading percentage you have to use Js