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)