DEV Community

Anwesh Gangula
Anwesh Gangula

Posted on

Gooey loading bar with plain CSS (+ Interaction with JS)

GIF of a Gooey loading bar using CSS

Loading bars are everywhere, they are one of the essential components of the modern world applications. So why to make them boring when you can add interactivity. Although there are existing tools which can help in this, we are going to use plain CSS, that too under 30 lines of code.

The essential components of this approach are filter: contrast(50); , filter: blur(15px); & @keyframes

On top of it, you can add interaction to the loading bar by using jQuery's draggable() function.

Check out the codepen below for demo.

Top comments (0)