DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Rohit Sharma
Rohit Sharma

Posted on

Simple Loader Animation with CSS

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 (4)

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

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.