Estilos

Componentes

Formularios

Organismos

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.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.

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


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


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>

Variantes

Navegación de pie de página