Table of Contents

PreviewHTMLCSS

Clean Loading Animation

Jatin Sharma
Jatin Sharma
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 -

Preview

preview

Now let's look at the code now -

HTML

index.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

styles.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%);
}

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: