DEV Community

Cover image for Create a loading spinner using pure CSS.
Gaurav
Gaurav

Posted on • Edited on

44 8

Create a loading spinner using pure CSS.

Hello everyone. In this quick tutorial, let's learn how to create a loading spinner using pure CSS in 3 easy steps!

Step 1 - HTML

Create the HTML structure we need (which is just 1 line)

<div class="spinner"></div>
Enter fullscreen mode Exit fullscreen mode

Step 2 - Add basic styles.

.spinner{
        width: 64px;
        height: 64px;
        border: 8px solid;
        border-color: #3d5af1 transparent #3d5af1 transparent;
        border-radius: 50%;
        animation: spin 1.2s linear infinite;
}
Enter fullscreen mode Exit fullscreen mode

Step 3 - Add the spin animation

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

That's it! we have created the loading spinner. Here is the final result.

spinner

Thank u😀

Top comments (15)

Collapse
 
afif profile image
Temani Afif • Edited

You can simplify your keyframes

 @keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
devggaurav profile image
Gaurav

Hey, thanks. 😅

Collapse
 
chakudi profile image
Vaishali JS

I didn't know about this trick.
How does it work? Is it like we can skip original state of the element at 0%?

Collapse
 
afif profile image
Temani Afif

if 0% or 100% is not defined then the default element style will get used

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Hey gaurav thanks for sharing bro I have just recently learned CSS animation course from scrimba and I can understand this codes 😁🙏

Collapse
 
devggaurav profile image
Gaurav

Thanks buddy! Glad u liked it😀

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

✌️

Collapse
 
aalphaindia profile image
Pawan Pawar

Nice one!!

Collapse
 
devggaurav profile image
Gaurav

Thanks😄

Collapse
 
khunfoshary profile image
Mahmoud Bakheet

It’s simple and nice CSS loading ..! Thanks..

Collapse
 
devggaurav profile image
Gaurav

Thank u 😄

Collapse
 
maperezromero profile image
maperezromero

Beaty and simple.

Collapse
 
marcknova profile image
Marck

Thanks.

Collapse
 
ntungwe90 profile image
Irene Ntungwe

Thanks for sharing its simple .

Collapse
 
israel177 profile image
israel177

Good thanks

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay