Barra de progreso

Una forma sencilla de crear una barra de progreso con JavaScript paso a paso.

Ejemplo:

Marcado HTML

Agregamos el marcado HTML para crear una barra de progreso.

<div id="myProgress">
  <div id="myBar">10%</div>
</div>

Apariencia CSS

Los estilos CSS mejoran la apariencia de la barra de progreso.

/* Estilos barra progreso */
#myProgress {
    width: 100%; /* ancho barra progreso */
    background-color: #ddd; /* fondo gris barra */
}

#myBar {
    width: 10%; /* ancho fondo barra */
    height: 30px; /* altura barra */
    background-color: #181a1b; /* fondo barra */
    text-align: center; /* texto centrado */
    line-height: 30px; /* altura barra */
    color: white; /* color numero barra */
}

Interacción y movimiento

Agregamos código JavaScript para que la barra de progreso tenga interacción y movimiento.

var i = 0;
function move() {
    if (i == 0) {
        i = 1;
        var elem = document.getElementById("myBar");
        var width = 10;
        var id = setInterval(frame, 10);
        function frame() {
            if (width >= 100) {
                clearInterval(id);
                i = 0;
            } else {
                width++;
                elem.style.width = width + "%";
                elem.innerHTML = width + "%";
            }
        }
    }
}

Referencias

El contenido de este artículo fue inspiración:

• How To - JavaScript Progress Bar

W3Schools es el sitio para desarrolladores web más grande del mundo.

---

"La mejor manera de aprender a programar es practicando todos los días"