Correctif « progress » (barre de progression)

But

L'élément « progress » de HTML5 affiche la progression d'une tâche. Étant donné que certains navigateurs ne prennent pas en charge cette fonctionnalité à l'origine, ce correctif émule la même fonctionnalité à l'aide de HTML générique et WAI-ARIA.

Exemples

<table class="table table-striped">
		<thead>
			<tr>
				<th scope="col">Valeur</th>
				<th scope="col">Max</th>
				<th scope="col">Résultat</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">Réactualiser</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 );