Back

How to create a simple loader

Tutorial on how to create a simple loader using CSS.

HTML

For HTML we'll have only one div element with "loader" class.


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

CSS

We'll just set width and height as desired, with 50% border radius. Then add solid border of 10px. With border-color property, we'll set the top and bottom color to #000 (black), and left and right to transparent.


        .loader {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 10px solid #000;
            border-color: #000 transparent;
        }

Now we'll create an animation named "rotation". We'll simply set the transform property to rotate 0 deg on 0% and 360 deg on 100%.


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

And now simply add the animation property on loader element. We'll set the duration of 1 second, infinite and linear.


        .loader {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            border: 10px solid #000;
            border-color: #000 transparent #000 transparent;
            animation: rotation 1s linear infinite; <!--  Animation  -->
        }

Video tutorial

You can find the video with step-by-step guide on youtube:

Whole code

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

<style>
.loader {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 10px solid #000;
  border-color: #000 transparent;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

</style>

Thank you for reading this article.

How to create a simple loader

HTML

CSS

Video tutorial

Whole code

More loaders

Similar

See also