Barra de Progreso – Tutorial Sencillo

Vamos a crear una barra de progreso con HTML, CSS y JavaScript.

HTML

Primero comenzaremos con la estructura basica en HTML para la barra de progreso.

<div class="progress-container">
   <div class="progress-bar" id="progress-bar"></div>
</div>

<button class="bpbtn" onclick="increaseProgress()">Increase Progress</button>

CSS

Lo siguiente sera crear el estilo de la barra de progreso y darle algo de estilo sencillo al boton que usaremos para llenar la barra.

.progress-container {
    width: 80%;
    background-color: #e0e0df;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.progress-bar {
    height: 30px;
    width: 0;
    background-color: #76c7c0;
    text-align: center;
    line-height: 30px;
    color: white;
    border-radius: 8px 0 0 8px;
    transition: width 0.4s ease;
}

button.bpbtn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

JavaScript

Finalmente, vamos a crear el javascript que permitira la barra de progreso funcionar.

let progress = 0;

function increaseProgress() {
    const progressBar = document.getElementById('progress-bar');
    
    if (progress < 100) {
        progress += 10; 
        progressBar.style.width = progress + '%';
        progressBar.innerText = progress + '%';
    }
}

Con esto ya tenemos una simple barra de progreso que puedes usar y mejorar.