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.

Uso

Cuándo usar

  • Se utiliza para indicar el estado de avance de un proceso en curso, permitiendo que la persona usuaria comprenda cuánto falta para su finalización.

Cuándo no usar

  • No utilizar este componente para formularios. La persona usuaria debe conocer en qué parte del proceso se encuentra.

Contexto de uso

Ubicación

Cómo sí usar la barra de progreso
check

La barra de progreso se debe ubicar alineada a la izquierda y sobre el contenido en el cual interactuará el usuario.

Cómo no usar la barra de progreso
check

Alinearlas a la derecha y en el medio del contenido interrumpe la lectura y dificulta su identificación.

El color predeterminado es azul. En el caso que haga referencia directa a un proceso en curso, utilice la barra verde para connotar éxito en el avance.

Color predeterminado de la barra de progreso

Contenido en esta página

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

Anatomía

Anatomia de la barra de progreso
ElementoCarácter
1. Etiqueta (Opcional) Texto que identifica el proceso o acción en curso. Debe ser clara, breve y descriptiva.
2. Indicador de avanceRepresentación visual del progreso alcanzado hasta el momento.
3. Fondo de barraRepresenta el total del proceso pendiente y completado.

Tipos

La barra de progreso es una representación visual que permite a las personas conocer en qué parte del proceso se encuentran.
La sección gris de la barra muestra la duración total del proceso y la barra de color representa el avance del usuario dentro del mismo.

Simple

El componente sirve para comunicar cuánto se ha avanzado en el proceso.

Barra de progreso simple

Con descripción

Las barras de progreso pueden tener una descripción que brinde contexto sobre el proceso que se está llevando adelante.

Variante de tarjeta sin borde

Contenido en esta página

Navegación por teclado

La barra de progreso no es un componente interactivo. No recibe foco ni permite interacción mediante teclado.
La información sobre el avance del proceso se comunica de forma accesible a través de texto descriptivo y atributos semánticos, permitiendo que las personas usuarias comprendan el estado del proceso sin necesidad de interacción.

Etiquetado descriptivo

Para cumplir con buenas prácticas de accesibilidad, se recomienda:

  1. Incluir una etiqueta o texto alternativo que describa el progreso del proceso (por ejemplo, "Paso 2 de 5" o "45 % completado").
  2. Asegurar que el estado del progreso sea comunicado en texto, no solo de forma visual.
  3. Utilizar roles y atributos ARIA apropiados (por ejemplo, role="progressbar") cuando el progreso sea dinámico.

Anuncios de cambio de estado

El cambio debe ser anunciado por lectores de pantalla de manera clara.
Se recomienda utilizar regiones con aria-live cuando la actualización no sea iniciada directamente por la persona usuaria.

Criterios WCAG aplicados

Success Criterion 1.3.1 Info and Relationships (Level A)

La información, la estructura y las relaciones transmitidas a través de la presentación pueden determinarse mediante programación o están disponibles en el texto.

Success Criterion 1.4.11 Non-Text Contrast (Level AA)

La presentación visual de elementos de la interfaz de usuario y objetos gráficos tiene por lo menos una relación de contraste de 3:1 con respecto a los colores adyacentes.

Success Criterion 1.4.3 Contrast (Minimum) (Level AA)

La presentación visual de texto y de imágenes de texto tiene una relación de contraste de por lo menos 4.5:1, excepto textos grandes e imágenes de texto grande que tienen un contraste de por lo menos 3:1, textos o imágenes que son parte de un componente inactivo de interfaz de usuario o son pura decoración, o logotipos.

Contenido en esta página

Navegación de pie de página