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:
Latest comments (7)
Great work. Is there a way that the percentage digits can also synchronize with the progress bar and not be constant?
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.
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.
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.)
Wrap them in a native Web Component and you make it easier for end-users to use.
Inspiration: dev.to/dannyengelman/what-web-tech...
That is a great idea. I need to try. Thanks!
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.