Show HN: Need to create a progress bar in HTML&CSS?

Why not use the progress indicator element <progress>?

The app offers more options for customizing the title, colors, and adding a call-to-action button, enabling people to interact with the bar/banner. It automatically generates the HTML and CSS, so you only need to copy and paste it.

eesmith 1y ago ↗

Okay, but having all that is a progress bar plus additional functionality, yes?

Even if that's what you need, isn't the idea that an HTML <progress> can replace:

  <div class="progress-bar">
    <div class="progress"><span>70</span></div>
  </div>

and a <label for=""> can replace at least one of these:

  <div class="hero-flex">
    <div class="title">Title</div>
    <div class="headline">headline</div>
  </div>

to give better accessibility?

alchaest 1y ago ↗

Yes you are right, I can replace that with <progress>, and I also need to improve accessibility.

Thank you for your feedback, I really appreciate it!

Show HN: Need to create a progress bar in HTML&CSS? (barbuilder.app)

4 comments