Como mover una barra de progreso con JavaScript

Name: Como mover una barra de progreso con JavaScript
Brand: Jose Aguilar
SKU: joseaguilarblog-7756
Availability: InStock
Rating: 5 (3 reviews)

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:

Source code

<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:

Source code

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:

Source code

<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:

Source code

.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;
}