I'm using Html5 progress element to display progress of a number of tasks, but how do i actually display the value of progress on each bar and the maximum value. Since it vary dramatically from 10 to 10,000 just displaying the bar without the max value is not good enough.
<table> <tr> <td> <label for="pb0"> Processing </label> </td> <td> <progress id="pb0"> </progress> </td> </tr> <tr> <td> <label for="pb1"> Songs loaded </label> </td> <td> <progress id="pb1" value="1415" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb3"> Songs ignored because already matched </label> </td> <td> <progress id="pb3" value="0" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb13"> Songs updated from Naim metadata </label> </td> <td> <progress id="pb13" value="1141" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb4"> Songs matched to MusicBrainz release </label> </td> <td> <progress id="pb4" value="4" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb5"> Songs matched to MusicBrainz song only </label> </td> <td> <progress id="pb5" value="0" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb14"> Songs matched to Acoustid song only </label> </td> <td> <progress id="pb14" value="0" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb7"> Songs matched with artwork </label> </td> <td> <progress id="pb7" value="619" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb8"> Songs saved (if not preview) </label> </td> <td> <progress id="pb8" value="4" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb11"> Completed </label> </td> <td> <progress id="pb11" value="4" max="17080"> </progress> </td> </tr> <tr> <td> <label for="pb12"> Errors </label> </td> <td> <progress id="pb12" value="0" max="17080"> </progress> </td> </tr> </table> <form action="/check_progress" id="check_progress"> </form>
3 Answers
Answers 1
I think @sideroxylon's comment points to the answer, using the ::after pseudo-element and referencing the value and max attributes.
Here is a Codepen sample: https://codepen.io/Tombarr/pen/JMbGqM. And the relevant code:
progress::after { content: attr(value) ' / ' attr(max); display: block; transform: translate(105%, 0); text-align: left; }
If your question is about value normalization (i.e. convert all indicators to a percent), you will need to use JavaScript. Something like the following: https://codepen.io/Tombarr/pen/goLPVy
Answers 2
Progress in HTML5 has limited options in displaying the data on it. You can however manually show the data by adding a 3rd column:
<tr> <td> <label for="pb1"> Songs loaded </label> </td> <td> <progress id="pb1" value="1415" max="17080"> </progress> </td> <td> <span>1415 / 17080</span> (8.2%) </td> </tr>
OR you can use the bootsrap Progress bar for additional options, Just add this bootstrap link: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css on your code and use the sample code below:
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1415" aria-valuemin="0" aria-valuemax="17080" style="width:8.2%"> 8.2% Complete </div> </div>
Answers 3
You could do so by using jQuery, I made a simple example to show you a possible way:
$('progress').each(function(){ var val = parseInt($(this).prop('value')); var max = parseInt($(this).prop('max')); var percent = (val / max) * 100; $('.perc').append('<p>' + percent + '%</p>'); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <progress value="15" max="110"></progress> <progress value="26" max="91"></progress> <progress value="16" max="80"></progress> <div class="perc"></div>
0 comments:
Post a Comment