Creating a loading animation with CSS

Learn: How to create loading animation in CSS? In this article we are going to learn creating loading animation in CSS, article contains CSS code and DEMO file.
Submitted by Abhishek Pathak, on July 11, 2017

Loading animations are very common nowadays. Every app or website takes some time to process. This is not shown to user, so this might frustrate the user as nothing might be happening on screen.

Loading is a technique where a loading animation is shown while the data is processed in the background, so that user knows how much time is left or at least still some processing is occurring at the background.

CSS code:

.loader {
  width: 60px;
  height: 60px;
  background: transparent;
  border: 10px solid transparent;
  border-top-color: #f56;
  border-left-color: #f56;
  border-radius: 50%;
  animation: loader .75s 10 ease forwards;
}

@keyframes loader {
  100% {
    transform: rotate(360deg);
  }
}

Here we first select the loader class using .loader selector. Now we give it some width and height, 60px is a nice number. Then we give it a transparent background, since we want the semicircle that is achieved through borders.

Now we give it a solid border of 10px using border: 10px solid transparent. Since we just want the top and left borders for the loader circle, we will color only the top and left border using border-top-color and border-left-color and the other borders are transparent colors.

Now since we want the semicircle, we will use the border-radius property that will simply make it circle. The whole box of 60x60px is turned into circle, but we only see a semicircle curve because we have given background and borders a transparent color.

Now we define a loader animation. The transform: rotate(360deg) rotates the element 360 with a smooth animation. The 100% is the state of object at the completion of animation, which is rotated by 360deg. The object comes to its original position since 360deg is physically equal to 0deg.

Now calling the animation using animation: loader .75s 5 ease forwards, we define .75seconds for each iteration which will occur for 5 seconds. The ease is for smooth transition and forwards is to maintain its last state after the animation completes.

Output:

DEMO

HTML code with CSS:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Loading Animation</title>
  
  <style>
    .loader {
      width: 60px;
      height: 60px;
      background: transparent;
      border: 10px solid transparent;
      border-top-color: #f56;
      border-left-color: #f56;
      border-radius: 50%;
      animation: loader .75s 10 ease forwards;
    }

    @keyframes loader {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  
</head>
<body>

  <div class="loader"></div>
  
</body>
</html>

Play with these CSS properties to create your own Loading animation.
Happy Loading!

CSS Tutorial & Examples »

Make a drop-cap effect using CSS

Custom Radio Button Styling with CSS

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples