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)
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-modethese are the new property that I have learnt.
Thanks, keep it up.
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.
Great work. Is there a way that the percentage digits can also synchronize with the progress bar and not be constant?