DEV Community

Cover image for How to create a progress bar with HTML and CSS (video)
Alvaro Montoro
Alvaro Montoro

Posted on

How to create a progress bar with HTML and CSS (video)

There are many pages on how to create a progress bar using web technologies, why do we need a new one? I found that many of those tutorials are bloated: they include a lot of unnecessary HTML elements or they base everything on JavaScript. Also, they tend to forget about Web Accessibility, and the resulting component will prove to be a challenge for assistive technologies (AT) users.

But it doesn't have to be that way. We can create a dynamic progress bar component using a single HTML element and some CSS, and it can be customizable, responsive, and accessible. I explained the process in this video:

If you prefer reading rather than watching videos for tutorials, I'll have a post about this topic soon (it will be sort of a transcript from the video). Or if you want to jump directly to the code and explore it, you can view the source code on this CodePen demo:

Top comments (7)

d7460n profile image

What!? No framework? No pre/post processing? No compiling? No third-party libs? No JS? Dependency free? More please! lol

But seriously, this is great! Thank you for posting.

alvaromontoro profile image
Alvaro Montoro

Shhh! Keep it quiet! If the framework-police finds out about this, they'll come looking for me! :P

Now seriously, thank you for your comment! I enjoy building things with vanilla HTML, CSS, and JS. I find adapting them to a framework is straightforward from there (unfortunately, the other way around doesn't work so well.)

dannyengelman profile image
Danny Engelman • Edited

Wrap them in a native Web Component and you make it easier for end-users to use.


Thread Thread
alvaromontoro profile image
Alvaro Montoro

That is a great idea. I need to try. Thanks!

nikhilroy2 profile image
Nikhil Chandra Roy

It's really great.
your articles always come's with some new property that I liked.
conic-gradient, aspect-ratio, mask, mask-mode
these are the new property that I have learnt.
Thanks, keep it up.

adamsmith6654 profile image

This is excellent advice for my sugar ants website, I'm worried about HTML and CSS. You found a solution to my problem. Thank you for providing this information.

ayubmetah profile image
Ayub Metah

Great work. Is there a way that the percentage digits can also synchronize with the progress bar and not be constant?