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>

2. Create this circle in CSS.

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

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;
}

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);
    }
}

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/Learntocreate/videos

See you soon!

Enzo.

Categories: