How to Create a Spinning Loader using CSS

In this example, we will learn how to create a spinning loader using CSS. We will be creating a round loader and animate it as a spinning loader using animation and @keyframes properties.

Prerequisites

• CSS animation property
• CSS @keyframes property
• CSS transform property
• CSS border property
• CSS border-top property
• CSS border-radius property
• CSS height property
• CSS width property

Example

HTML

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

CSS

        .loader {
            border: 4px solid #f3f3f3;
            border-top: 4px solid rgb(182, 182, 182);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

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

Output

Here, we created a round loader using creating a loader element with width: 20px and height: 20px. This property created a square. So, we applied border-radius: 50% to transform it into a circle. Then border: 4px solid #f3f3f3 sets the border width or thickness of the loader to 4px. We changed the color of border-top to complete the loader styling. Then we created the loading animation using the animation property and rotate it on a loop using transform: rotate() in the @keyframes.

Conclusion

In this example, we learned how to create a spinning loader using CSS. We created a round loader using various CSS properties and animate a spinning loader using animation and @keyframes properties.