DEV Community

Cover image for Spinning Loader in pure CSS!
Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Spinning Loader in pure CSS!

Hey fellow creators

Learn how to create a spinning loader in pure CSS in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Start by creating an empty div:

<div class"circle"></div>
Enter fullscreen mode Exit fullscreen mode

 

2. Create this circle in CSS.

.circle{
    margin: 100px auto 0;
    width: 275px;
    height: 275px;
    border-radius: 50%;
    border: 6px solid crimson;
}
Enter fullscreen mode Exit fullscreen mode

This will create a large red circle in the middle of your page.

 

3. Modify the colours of your circle!

Modify the colours as shown below so that only the top and the bottom of the circle are red, and the rest is transparent:

.circle{
    ...
    border: 6px solid transparent;
    border-top-color: crimson;
    border-bottom-color: crimson;
}
Enter fullscreen mode Exit fullscreen mode

 

4. Add the animation!

Create the animation so that your loader spins:

.circle{
    ...
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin{
    to {
        transform: rotate(360deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

 
You could replace ease-in-out by linear if you like. You can also play with the thickness of the border! It's up to you ;)

 
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Discussion (0)