Create a Progress Bar with a Single HTML Element
In April 2023, I added new progress bar components to HyperUI and it led me to ponder:
Is it possible to create a progress bar component using just one HTML element?
The answer is yes.
This example showcases the simple progress bar component.
The approach you choose boils down to personal preference. I tend to use the one with more HTML as it provides a more solid foundation for future enhancements.
However, using a single HTML element is a very neat approach.
But, if you were to design something like the striped progress bar component, the single element approach wouldn't result in clean code. Your class="..."
would become a jumble of text that's hard to read.
But, it's not actually as bad as it might seem! 🤷♀️