TheLazy.Dev
Portfolio GitHub

Blog

css |webdev |beginners |tutorial

Create a loading spinner using pure CSS.

devggaurav

Gaurav

Posted on March 4, 2021

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😀

💖 💪 🙅 🚩
devggaurav
Gaurav

Posted on March 4, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Simple animated button with CSS
webdev Simple animated button with CSS

May 29, 2024

Understanding the Difference Between REM and PX in CSS
css Understanding the Difference Between REM and PX in CSS

March 12, 2024

Calculator UI in HTML and CSS
webdev Calculator UI in HTML and CSS

March 7, 2024

Best 20 CSS Libraries for Developers and Designers [2024]
css Best 20 CSS Libraries for Developers and Designers [2024]

February 16, 2024

How to preload images in HTML and CSS
webdev How to preload images in HTML and CSS

December 12, 2023