DEV Community

Rohit Sharma
Rohit Sharma

Posted on

29 6

Simple Loader Animation with CSS

Hello everyone, In this article we are going to create Loading Animation with the use of simple CSS.

Take a look of what we are designing

HTML

It's the simplest part of this project.

<body>
    <div class="loader"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

That's it for HTML.

CSS

To align the loader in center

 body{
            display: grid;
            place-items: center;
            height: 90vh;
        }
Enter fullscreen mode Exit fullscreen mode

Now styling the Loader

        .loader {
  border: 10px solid #f3f3f3; 
  border-top: 10px solid #3498db; 
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 1s linear infinite;
}
Enter fullscreen mode Exit fullscreen mode

Now adding keyframes to animate the loader


@keyframes spin {
  0% { transform: rotate(0deg);
       border-top: 10px solid blue;
}
    25%{transform: rotate(90deg);
        border-top: 10px solid green;

    }
    50%{transform: rotate(180deg);
        border-top: 10px solid yellow;
    }
    75%{transform: rotate(270deg);
        border-top: 10px solid red;
    }

  100% { transform: rotate(360deg);
        border-top: 10px solid blue;    
}
}
Enter fullscreen mode Exit fullscreen mode

Our desired Loader Animation is ready.

If you love it♥ then show some love.
Buy Me A Coffee

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (3)

Collapse
 
devrohit0 profile image
Rohit Sharma

Thanks ☺️

Collapse
 
maybenoobish profile image
Matthias Kluth

Could you explain, where it would gather information about the loading percentage?

Collapse
 
devrohit0 profile image
Rohit Sharma

This is just CSS animation. For loading percentage you have to use Js

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