Gaurav

Posted on Mar 4, 2021 • Edited on Mar 10, 2021

Create a loading spinner using pure CSS.

#css #webdev #beginners #tutorial

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>

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

Step 3 - Add the spin animation

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

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

Thank u😀

Top comments (15)

Temani Afif • Mar 4 '21 • Edited

You can simplify your keyframes

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

Gaurav • Mar 4 '21

Hey, thanks. 😅

Vaishali JS • Mar 5 '21

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

Temani Afif • Mar 5 '21

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

🚩 Atul Prajapati 🇮🇳 • Mar 6 '21

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

Gaurav • Mar 6 '21

Thanks buddy! Glad u liked it😀

🚩 Atul Prajapati 🇮🇳 • Mar 6 '21

✌️

Pawan Pawar • Mar 5 '21

Nice one!!

Gaurav • Mar 6 '21

Thanks😄

Mahmoud Bakheet • Mar 6 '21

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

Gaurav • Mar 6 '21

Thank u 😄

maperezromero • May 21 '21

Beaty and simple.

Marck • Mar 4 '21

Thanks.

Irene Ntungwe • Dec 29 '21

Thanks for sharing its simple .

israel177 • Mar 7 '21

Good thanks

View full discussion (15 comments)

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

DEV Community

Create a loading spinner using pure CSS.

Step 1 - HTML

Step 2 - Add basic styles.

Step 3 - Add the spin animation

Top comments (15)

Read next

How do I display images from Google Drive on a website?

New Features in React 19: Transforming the Development Experience

Why CSS Still Rocks in 2024

Optimizando la Integración de APIs de Blog: Lecciones Aprendidas con Dev.to y Hashnode