Create a Progress Bar with a Single HTML Element

Recently (April 2023), I added new progress bar components to HyperUI.

Which got me thinking...

Could you create a progress bar component with a single HTML element?

Short answer. Yes.

This example is the simple progress bar component.

Which approach you should take is personal preference. For me, I'd use the one with more HTML as it's easier to build upon in the future.

However, the single HTML element is a very clean approach.

It wouldn't be clean code if you were to do something like the striped progress bar component. At that point your class="..." would be an unreadable mess.

Oof.

It's not actually that bad! 🤷‍♀️