Como usar el ProgressBar de HTML5 con Javascript

El progressbar de HTML5 sirve para dar una solución nativa a una barra de progresos con el nuevo estándar, aprende a usarlo aquí.

El progressbar o barra de progreso sirve para llevar el control del progreso de las operaciones en un script, puede ser una carga de pagina o de archivos, entre otras cosas.

El progressbar de HTML5 usa la etiqueta <progressbar value=0 max=100></progressbar>

El progressbar tiene 2 atributos, value que define el valor de la barra de progreso y max que define el valor máximo.

A continuación les muestro un ejemplo donde uso una barra de progreso con 2 botones para aumentar o disminuir el valor.

Código

La primera parte del código es una parte HTML donde agregamos el progressbar, un div como etiqueta y 2 botones.

<progress id="prog" value="0" max="1000" indeterminate></progress>
<div id="labl">Valor: 0</div>
<input type="submit" id="minu" value="-">
<input type="button" id="plus" value="+">

La siguiente parte del código es la parte javascript (con comentarios), donde vamos a manera todos los elementos html a partir de su Id. Recordar insertar este código entre las etiquetas <script></script>

prog = document.getElementById("prog"); // El progressbar
labl = document.getElementById("labl"); // la etiqueta
	
document.getElementById("minu").onclick = function(){ // El evento click del boton menos
	if(prog.value>=100){ // Verificamos que el valor sera mayor o igual a 100
	prog.value -= 100;
	labl.innerHTML = "Valor: "+prog.value; // Actualizamos la etiqueta
	}else{
		alert("No se puede disminuir!");
	}
}
document.getElementById("plus").onclick = function(){ // El evento click del boton mas
	if(prog.value<1000){ // Verificamos que el valor sera menor que 1000
	prog.value += 100; // Actualizamos la etiqueta
	labl.innerHTML = "Valor: "+prog.value;
	}else if(prog.value==1000){ // Si el valor es 1000 entonces solo lanzamos un alerta
		alert("No se puede sobrepasar!");
	}
}

Y listo ya tenemos un progressbar que podemos manipular con los botones.

Resultado

En mi caso adorne un poquito el documento para la presentación, pero el funcionamiento del progressbar es el mismo.

Espero les guste este ejemplo.