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

<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="updateProgress">Update</button></td>
			<td><progress id="updateTest" value="82" max="100"><span class="wb-inv">82%</span></progress></td>
		</tr>
	</tbody>
</table>

(function( $, wb ) {
"use strict";

$( document ).on( "click vclick", "#updateProgress", 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 );