DEV Community

Cover image for Clean Loading Animation
Jatin Sharma
Jatin Sharma

Posted on

Clean Loading Animation

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 -


<div class="loading_container">
  <div class="loading"></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


/* 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


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

Also Read

Top comments (0)