Simple loader — A step-by-step guide

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 whole code with video tutorial here.

Thank you for reading this article. ❤️