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! 🤷‍♀️