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.
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:
and a <label for=""> can replace at least one of these:<div class="progress-bar"> <div class="progress"><span>70</span></div> </div>
to give better accessibility?<div class="hero-flex"> <div class="title">Title</div> <div class="headline">headline</div> </div>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!