显示进度条值

Question

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.

Answer 1

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