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:

Oldest comments (7)

Collapse
 
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.

Collapse
 
d7460n profile image
D7460N

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.

Collapse
 
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.)

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

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

Inspiration: dev.to/dannyengelman/what-web-tech...

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

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

Collapse
 
adamsmith6654 profile image
adamsmith6654

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.

Collapse
 
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?