DEV Community

Cover image for Create a loading spinner using pure CSS.

Create a loading spinner using pure CSS.

Gaurav on March 04, 2021

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 Creat...
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