DEV Community

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

Posted on • Edited on

5 2

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.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)