Table of Contents

Clean Loading Animation

Dec 1, 2021
1 min read
171 words

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>

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%);

Jatin's Newsletter

I write monthly Tech, Web Development and chrome extension that will improve your productivity. Trust me, I won't spam you.

Share on Social Media: