Showing Progress Bar Values

user_19326405 0
Viewed 113

I've been trying to make a progress bar with a value in the middle with just html and css but I have no idea how to go about it. I need some help with integrating the given value into the bar so it shows the value in the middle.

My code so far is this:

<progress id="file" value="80" max="100"> 80% </progress>

but it doesn't show number in the middle.

progress-bar css html javascript
1 Answers

You can check W3Schools Custom Progress Bar.

  1. Create an outer div as a container of the progress bar
  2. An inner div div that shows the "progress"
  3. Change the "progress" using javascript

You can try this:

<div style="background-color: grey; text-align:center">
  <div style="width:25%;background-color:green;">25%</div>
</div>

You can add more CSS on outer and inner div to make it more appealing

user_90538530
Related