Como mover una barra de progreso con JavaScript

Las barras de progreso son un recurso que utilizo muchísimo para hacerle saber al usuario que debe esperar a que un proceso se ejecute por completo antes de seguir interactuando con la página.

Un ejemplo claro sería el proceso de una subida de archivos o una caga de información.

Este tutorial es una continuación de Barras de progreso con CSS donde podéis encontrar la estructura HTML de las barras de progreso y su maqueación a través de las hojas de estilos en cascada.

Una vez tengas completa la visualización de la barra de progreso en tu sitio ya puedes volver aquí donde te voy a enseñar un truco para mover la barra de progreso después de pulsar un botón.

Es más fácil de lo que parece. Fíjate a continuación.

El botón de ejecución de la barra de progreso

Cerca de la barra de progreso que ya tienes, puedes ubicar un botón como este:

<button id="executeButton" class="btn btn-primary" onclick="moveProgressBar()"><i class="fa-solid fa-bars-progress"></i> Ejecutar acción</button>

Debe fijarte en el identificador del botón y en el atributo onclick donde estamos llamando a una función llamada moveProgressBar().

La función JavaScript que permite el movimiento de la barra de progreso

En el archivo JavaScript de tu proyecto puedes crear una función de la siguiente manera:

function moveProgressBar() {
    const executeButton = document.getElementById('executeButton');
    executeButton.disabled = true;
    const progressBar = document.getElementById('myBar');
    const progresBarText = progressBar.querySelector('.progress-bar-text');
    let percent = 0;
    progressBar.style.width = percent + '%';
    progresBarText.textContent = percent + '%';
 
    let progress = setInterval(function() {
        if (percent >= 100) {
            clearInterval(progress);
            executeButton.disabled = false;
            alert('fin');
        } else {
            percent = percent + 1; 
            progressBar.style.width = percent + '%';
            progresBarText.textContent = percent + '%';
        }
    }, 1000);  
}

Cada vez que se pulsa este botón con identificador «executeButton», desactivo el  mismo para evitar que vuelva a ser pulsado mientras la barra de progreso está en marcha.

Identifico los elementos de la barra de progreso que me interesan.

Defino una variable «percent» iniciando en 0.

Establezco el porcentaje o valor de «percent» como ancho en modo porcentaje (%) de la barra de progreso.

Y el mismo porcentaje se lo agrego al texto de la barra de progreso.

Luego, defino una variable «progress» que contiene una llamada que se ejecuta cada 1 segundo con setInterval().

Dentro de esta función, compruebo que el valor de la variable «percent» no haya pasado de 100 para incrementar su valor en 1, ampliar el ancho de la barra de progreso en un 1% y mostrar el valor del progreso en el texto de la barra de progreso.

Cuando la variable «percent» llega a 100 será el fin del progreso. Por eso, limpio la ejecución del intervalo, habilito de nuevo el botón y muestro una alerta de confirmación.

Estructura HTML de la barra de progreso

Por si no te ha quedado claro el aspecto visual que puede tener tu barra de progreso, la estructura HTML podría ser algo como lo que sigue:

<div class="progress">
    <div id="myBar" class="progress-bar" style="width:0%;">
        <span class="progress-bar-text">0%</span>
    </div>
</div>

Maquetación de la barra de progreso

Luego, puedes aplicarle los siguientes estilos:

.progress {
    height: 35px;
    width: 100%;
    border: 1px solid #428bca;
    border-radius: 5px;
    background-color: #e6f3fa;
    margin-bottom: 15px;
}
 
.progress-bar {
    height: 100%;
    background: #428bca;
    display: flex;
    align-items: center;
    transition: width 0.25s;
    border-radius: 5px;
}
 
.progress-bar-text {
    margin-left: 10px;
    font-weight: bold;
    color: #cce7f5;
}
 
button[disabled="disabled"] {
    opacity: 0.7;
}

Resultado

Barra de progreso al 75%

Conclusiones

Esta función consigue muy bien su objetivo que, no es más que mover la barra de progreso en un 1% cada segundo.

Esto significa que cada movimiento se realiza cada segundo y siempre que se ejecuta lo hace de la misma manera y tarda el mismo tiempo en ejecutarse.

En realidad, el tiempo de ejecución de las barras de progreso suele ser variable y asociado al tiempo real que tarde realmente una tarea o proceso.

Por eso, en próximos tutoriales relacionados ilustraré un ejemplo siempre y cuando me lo pidáis con concurrencia en los comentarios.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(1 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre