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 -

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

Also Read

• Curved Timeline in CSS
• How to use Web Storage API?
• 10 CSS Resources that you should bookmark