How do i actually display the value and max value in html5 progress

Question

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>

i dont know why marked as closed, clearly is about programming, how do you get progress bar to use show its values and max value ? — Paul Taylor, Dec 11 '17 at 18:42
Start with a look at this: [Show a progress bar's value (number) like 55% on the bar by using CSS](https://stackoverflow.com/questions/33964214/show-a-progress-bars-value-number-like-55-on-the-bar-by-using-css) — sideroxylon, Dec 17 '17 at 10:22

Tom · Answer 1 · 2018-01-11T22:52:45.760

3

Regarding normalization, see below. As far as displaying the values, there are a few options. I've included an updated Codepen.

As it turns out, only Webkit/ Blink browsers support the :after pseudo-elements on progress elements per CSS Tricks. One alternative is to append an element like span after the progress element, then absolutely position it where you want (i.e. right edge). CSS Tricks also shows how you can accomplish this on the backend if you'd prefer to not use JavaScript.

~~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

edited Jan 11 '18 at 22:52

answered Dec 23 '17 at 16:40

Tom

6,947
7
46
76

thanks, but when I try the example is does show the progress numbers ? – Paul Taylor Jan 10 '18 at 21:42
@PaulTaylor Do you mean it doesn't show the progress numbers? In that case, what browser are you using? Pseudo-elements requires IE 9 or later (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) and HTML5 progress bars require IE 10 or later (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) – Tom Jan 10 '18 at 22:13
yes, im using Firefox 57.0.64 and I just tried with Microsoft Edge as well, does your codepen sample work for you ? – Paul Taylor Jan 11 '18 at 09:23
@PaulTaylor So I was using Chrome, but it looks like only WebKit & Blink browsers support `:after` on `progress` elements (not sure why), my mistake. Here's another solution (see updated answer): https://codepen.io/Tombarr/pen/JMbGqM – Tom Jan 11 '18 at 22:46

score 2 · Accepted Answer · answered Dec 17 '17 at 10:53

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>

Thanks, actually I think this simplest answer is actually best.Since I am constructing the html page anyway it makes sense for me to calculate pecentages on server and then just display as an extra td element as you suggest. — Paul Taylor, Jan 13 '18 at 09:06

score 1 · Answer 3 · answered Dec 20 '17 at 07:53

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>

score 0 · Answer 4 · answered Dec 24 '17 at 09:42

You can style your progress bar like below and use :after to show the values.

body {
  font: 13px verdana
}

label {
  display: block;
}

progress:after {
  content: attr(value) "/" attr(max);
  position: absolute;
  left: 105%;
  top: 0;
}

progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Get rid of default border in Firefox. */
  border: none;
  appearance: none;
  height: 20px;
  padding: 1px;
  border: 1px solid #bbbbbb;
  background-color: #e6e6e6;
  position: relative;
  border-radius: 2px;
}

progress[value]::-webkit-progress-value {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(33%, #00b01e), color-stop(66%, #66da6d), to(#1bc040));
  background-image: linear-gradient(to right, #00b01e 33%, #66da6d 66%, #1bc040 100%);
  border-radius: 2px;
}

progress[value]::-webkit-progress-bar {
  background-color: #e6e6e6;
  border-radius: 2px;
}

<table>
  <tr>
    <td>
      <label for="pb0">Processing</label>
    </td>
    <td>
      <progress id="pb0" value="17080" max="17080"></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>

How do i actually display the value and max value in html5 progress

4 Answers4