Barra de progreso en HTML y Javascript

Barra de progreso en HTML y Javascript

Esta barra de progreso puede usarse como en el caso de algún sitio e descarga donde nos pide esperar unos cuantos segundos, en este caso es el mismo principio, pero en aun mas gráfico.

Una de las ventajas es que puede utilizarse en algún proyecto como un juego en web, en el cual para actualizar o llevar acabo una acción necesita pasar un periodo de tiempo, de esta forma podemos mostrarlo de manera gráfica y hacer mas amena la espera.

Ejemplo de la barra de progreso

Estilo de la barra de progreso – Se coloca un estilo a la barra de progreso para que se pueda visualizar correctamente. (debe ir entre <head></head>)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<style type="text/css">
div#vacio
{
	background-color: #e4e4e4;
	border: 1px solid black;
	width: 280px;
	padding: 0px;
	padding-top: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
 
div#div_completado
{
	position: relative;
	top: 0px;
	left: 0px;
	background-color: #9af;
	width: 0px;
	padding-top: 5px;
	padding: 0px;
}
 
div#div_barra
{
	position: relative;
	top: 0px;
	left: 2px;
	color: #000;
	padding: 0px;
	padding-top: 0px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}
 
div#div_boton
{
	position: relative;
	top: 0px;
	left: 0px;
	height: 30px;
	text-align: center;
	padding: 0px;
	padding-top: 5px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}
</style>

Funciones de Javascript – Son las funciones en Javascript que harán los cálculos para decir cuanto porcentaje lleva y cuanto tiempo falta. (debe ir entre <body></body>)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

<script type='text/javascript'>
// Variables para controlar el inicio y termino de la cuenta
var inicio = false;
var termino = false;
 
// Variables editables, para personalizar la barra de porcentaje
var tam_barra = 280;	// Tamaño de la barra en pixeles
var seg_barra = 60;		// Segundos de trabajo hasta 100%
 
// Se toma la diferencia con respecto el tiempo actual
var date = new Date();
var milisec_barra = seg_barra * 1000;
var milisec_final = date.getTime() + milisec_barra;
 
// Funcion que inicia el proceso
function iniciar_proceso()
{
	// Solo si no a iniciado el proceso se inicia
	if (inicio == false)
	{
		inicio = true;
  		aumenta_barra();
	}
}
 
// Funcion que aumenta el porcentaje de la barra
function aumenta_barra()
{
	// Solo si no a terminado sigue aumentando
	if (termino == false)
	{
		// Se toma el tiempo actual
		var ahora = new Date();
	    milisec_ahora = ahora.getTime();
 
		// Se toma el tiempo restante para llegar a 100%
	    var milisec_restante = Math.ceil((milisec_final - milisec_ahora) / 100);
	    if (milisec_restante < 0)
		{
			milisec_restante = 0;
		}
 
		// Se divide el tiempo restante en horas, minutos y segundos
		var horas = Math.floor(milisec_restante / 36000);
		var minutos = Math.floor(milisec_restante % 36000 / 600);
		var segundos = Math.floor(milisec_restante % 36000 % 600) / 10;
		if ((segundos % 1) == 0)
		{
			segundos = segundos + ".0";
		}
		var salida;
		if (horas > 0)
		{
			var salida = horas + " horas, " + minutos + " minutos y " + segundos + " segundos.";
		}
		else
		{
			if (minutos > 0)
			{
				var salida = minutos + " minuto(s) y " + segundos + " segundos.";
			}
			else
			{
			 	var salida = segundos + " segundos.";
			}
		}
 
		// Se genera el porcentaje a partir del tiempo restante para el 100%
		milisec_restante = Math.floor(milisec_restante) / 10;
	    var porcentaje = Math.floor(((milisec_barra - milisec_restante * 1000) / milisec_barra) * 100);
	    if (porcentaje < 0)
		{
			porcentaje = 1;
		}
 
		// Se verifica si se llego al tiempo final
		if (milisec_final >= milisec_ahora)
		{
			// Si aun no termina solo se muestra el porcentaje
			document.getElementById("div_boton").innerHTML = salida;
			document.getElementById("div_barra").innerHTML = porcentaje + "%";
	    }
		else
		{
			// Si termina se puede continuar mostrando o enviando alguna informacion
			termino = true;
			/*document.forma.submit();*/ // Mandar que termino el trabajo para permitir continuar
			document.getElementById("div_barra").innerHTML = "100% listo";
			document.getElementById("div_boton").innerHTML = "<input class='form' type='button' value='Continuar'>";
		}
      	document.getElementById("div_completado").style.width = (porcentaje / 100) * tam_barra + "px";
		setTimeout("aumenta_barra();", 100);
	}
}
 
// Se inicia el proceso despues de 300 milisegundos, se puede editar
window.setTimeout("iniciar_proceso()", 300);
</script>

Estructura en HTML – Sera la estructura donde se mostrara la barra de progreso y al terminar se mostrara un botón. (debe ir entre <body></body>)

1
2
3
4
5
6
7
8

<div align="center">
    <div id="vacio" align="left">
        <div id="div_completado">
            <div id="div_barra"></div>
        </div>
    </div>
    <div id="div_boton"></div>
</div>

En este ejemplo yo coloque para que muestre un botón al finalizar la cuenta regresiva, pueden colocar que al presionar el botón pueda hacer alguna acción, pero también pueden cambiarlo para que se lleve acabo una función incluso traer un resultado a partir de una consulta en Ajax, para evitar que se tenga el resultado antes de terminar el tiempo.

Como ven es un script sencillo que pueden modificar o editar a su gusto, espero que les sea de utilidad. :wink:

votar Compartir