Progress polyfill (progress bar)
Purpose
The HTML5 progress
element displays the progress of a task. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.
Examples
Value | Max | Result |
---|---|---|
22 | 100 | |
198 | 300 | |
500 | 500 | |
View code
HTML
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Value</th>
<th scope="col">Max</th>
<th scope="col">Result</th>
</tr>
</thead>
<tbody>
<tr>
<td>22</td>
<td>100</td>
<td><progress value="22" max="100"><span class="wb-inv">22%</span></progress></td>
</tr>
<tr>
<td>198</td>
<td>300</td>
<td><progress value="198" max="300"><span class="wb-inv">66%</span></progress></td>
</tr>
<tr>
<td>500</td>
<td>500</td>
<td><progress value="500" max="500"><span class="wb-inv">100%</span></progress></td>
</tr>
<tr>
<td colspan="2"><button class="btn btn-default" id="update-progress" type="button">Update</button></td>
<td><progress id="updateTest" value="82" max="100"><span class="wb-inv">82%</span></progress></td>
</tr>
</tbody>
</table>
JavaScript (demo only)
(function( $, wb ) {
"use strict";
$( document ).on( "click", "#update-progress", function() {
var $elm = $( "#updateTest" ),
valuenow = parseInt( $elm.attr( "value" ), 10 ),
newValue = valuenow === parseInt( $elm.attr( "max" ), 10 ) ? 0 : valuenow + 1;
$elm
.attr( "value", newValue )
.find( "span" )
.text( newValue + "%" );
// Update the visuals
$elm.trigger( "wb-update.wb-progress" );
});
})( jQuery, wb );
- Date modified: