Barra de progreso

Las barras de progreso muestran visualmente el avance de un proceso de varios pasos a partir de la interacción de la persona usuaria.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

Simple


<div class="container">
    <div class="progress">
        <div
            class="progress-bar bg-primary"
            role="progressbar"
            aria-valuenow={25}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '25%' }}
        ></div>
    </div>
    <br />
    <div class="progress">
        <div
            class="progress-bar bg-primary"
            role="progressbar"
            aria-valuenow={50}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '50%' }}
        ></div>
    </div>
    <br />
    <div class="progress">
        <div
            class="progress-bar bg-primary"
            role="progressbar"
            aria-valuenow={100}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '100%' }}
        ></div>
    </div>
</div>


<div class="container">
    <div class="progress">
        <div
            class="progress-bar bg-success"
            role="progressbar"
            aria-valuenow={25}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '25%' }}
        ></div>
    </div>

    <br />

    <div class="progress">
        <div
            class="progress-bar bg-success"
            role="progressbar"
            aria-valuenow={50}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '50%' }}
        ></div>
    </div>

    <br />

    <div class="progress">
        <div
            class="progress-bar bg-success"
            role="progressbar"
            aria-valuenow={100}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '100%' }}
        ></div>
    </div>
</div>

Con descripción

Descripción


<div class="container">
    <p class="progress-description">Descripción</p>
    <div class="progress">
        <div
            class="progress-bar bg-primary"
            role="progressbar"
            aria-valuenow={50}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '50%' }}
        ></div>
    </div>

    <br />

    <p class="progress-description">Descripción</p>
    <div class="progress">
        <div
            class="progress-bar bg-primary"
            role="progressbar"
            aria-valuenow={100}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '100%' }}
        ></div>
    </div>
</div>

Descripción


<div class="container">
    <p class="progress-description">Descripción</p>
    <div class="progress">
        <div
            class="progress-bar bg-success"
            role="progressbar"
            aria-valuenow={50}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '50%' }}
        ></div>
    </div>

    <br />

    <p class="progress-description">Descripción</p>
    <div class="progress">
        <div
            class="progress-bar bg-success"
            role="progressbar"
            aria-valuenow={100}
            aria-valuemin={0}
            aria-valuemax={100}
            style={{ width: '100%' }}
        ></div>
    </div>
</div>

Barra de progreso

Simple

Con descripción

Navegación de pie de página