El componente Progress de Bootstrap

Documentación y ejemplos para usar barras de progreso personalizadas de Bootstrap que admiten barras apiladas, fondos animados y etiquetas de texto.

Nota

Nuevo marcado en v5.3.0: Hemos dejado de utilizar la estructura HTML anterior para las barras de progreso y la reemplazamos por una más accesible. La estructura anterior seguirá funcionando hasta la v6. Mira los cambios en nuestra guía de migración.

Cómo funciona el componente Progress

Los componentes de progreso se construyen con dos elementos HTML, algo de CSS para establecer el ancho y algunos atributos. No utilizamos el elemento HTML5 <progress>, lo que garantiza que puedas apilar barras de progreso, animarlas y colocar etiquetas de texto sobre ellas.

• Usamos .progress como contenedor para indicar el valor máximo de la barra de progreso.
• El contenedor .progress también requiere los atributos role="progressbar" y aria para crear sea accesible, incluido un nombre accesible (usando aria-label, aria-labelledby o similar).
• Usamos el .progress-bar interno únicamente para la barra visual y la etiqueta.
• El .progress-bar requiere un estilo en línea, una clase de utilidad o CSS personalizado para establecer su ancho.
• Proporcionamos una clase especial .progress-stacked para crear barras de progreso múltiples/apiladas.

Junta todo eso y tendrás los siguientes ejemplos.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 0%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 100%"></div>
</div>

Tamaño de la barra del componente Progress

Ancho

Bootstrap proporciona un puñado de utilidades para configurar el ancho. Dependiendo de tus necesidades, estos pueden ayudarte a configurar rápidamente el ancho de la .progress-bar.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo básico" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar w-75"></div>
</div>

Altura

Solo estableces un valor de height en el contenedor .progress, por lo que si cambias ese valor, el .progress-bar cambiará automáticamente de tamaño en consecuencia.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo 1px de alto" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 1px">
    <div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo 20px de alto" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
    <div class="progress-bar" style="width: 25%"></div>
</div>

Etiquetas en el componente Progress

Agrega etiquetas a tus barras de progreso colocando texto dentro de la .progress-bar.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo con etiqueta" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" style="width: 25%">25%</div>
</div>

Ten en cuenta que, de forma predeterminada, el contenido dentro de .progress-bar se controla con overflow: hidden, por lo que no desborde fuera de la barra. Si tu barra de progreso es más corta que tu etiqueta, el contenido estará limitado y puede volverse ilegible. Para cambiar este comportamiento, puedes utilizar .overflow-visible de las utilidades de desbordamiento, pero asegúrate de definir también un color de texto explícito para que el texto siga siendo legible. Sin embargo, ten en cuenta que actualmente este enfoque no tiene en cuenta los modos de color.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo con etiqueta" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar overflow-visible text-dark" style="width: 10%">
        Texto de etiqueta largo para la barra de progreso, configurado en un color oscuro
    </div>
</div>

Personalizar el fondo del componente Progress

Usa clases de utilidades en segundo plano para cambiar la apariencia de las barras de progreso individuales.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo de éxito" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de información" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de advertencia" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de peligro" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Nota

Consejo de accesibilidad: El uso de colores para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegúrate de que el significado sea obvio a partir del contenido mismo (por ejemplo, el texto visible con un suficiente contraste de color) o se incluye a través de medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Si agregas etiquetas a las barras de progreso con un color de fondo personalizado, asegúrate de establecer también un color del texto, para que las etiquetas sigan siendo legibles y tengan suficiente contraste.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo de éxito" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de información" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-info text-dark" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de advertencia" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-warning text-dark" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de peligro" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar bg-danger" style="width: 100%">100%</div>
</div>

Como alternativa, puedes usar las nuevas clases auxiliares combinadas color y fondo.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo de advertencia" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>

Usar varios componente Progress

Puedes incluir múltiples componentes de progreso dentro de un contenedor con .progress-stacked para crear una única barra de progreso apilada. Ten en cuenta que en este caso, el estilo para establecer el ancho visual de la barra de progreso debe aplicarse a los elementos .progress, en lugar de .progress-bars.

HTML

<div class="progress-stacked">
    <div class="progress" role="progressbar" aria-label="Segmento uno" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%">
        <div class="progress-bar"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Segmento dos" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
        <div class="progress-bar bg-success"></div>
    </div>
    <div class="progress" role="progressbar" aria-label="Segmento tres" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
        <div class="progress-bar bg-info"></div>
    </div>
</div>

Estilo rayado en el componente Progress

Agrega .progress-bar-striped a cualquier .progress-bar para aplicar una franja mediante un degradado CSS sobre el color de fondo de la barra de progreso.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo rayado predeterminado" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de éxito rayado" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-success" style="width: 25%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de información rayada" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-info" style="width: 50%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de rayas de advertencia" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-warning" style="width: 75%"></div>
</div>
<div class="progress" role="progressbar" aria-label="Ejemplo de rayas de peligro" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

Rayas animadas en el componente Progress

El degradado rayado también se puede animar. Añade .progress-bar-animated a .progress-bar para animar las franjas de derecha a izquierda mediante animaciones CSS3.

HTML

<div class="progress" role="progressbar" aria-label="Ejemplo de rayas animadas" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

Personalización del CSS del componente

Variables Sass del componente

Agregado en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, las barras de progreso ahora usan variables CSS locales en .progress para una personalización mejorada en tiempo real. Los valores de las variables CSS se establecen a través de Sass, por lo que la personalización de Sass también es compatible.

scss/_progress.scss

scss/_progress.scss

--#{$prefix}progress-height: #{$progress-height};
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
--#{$prefix}progress-bg: #{$progress-bg};
--#{$prefix}progress-border-radius: #{$progress-border-radius};
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
--#{$prefix}progress-bar-color: #{$progress-bar-color};
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Variables Sass generales relacionadas

scss/_variables.scss

scss/_variables.scss

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       var(--#{$prefix}secondary-bg);
$progress-border-radius:            var(--#{$prefix}border-radius);
$progress-box-shadow:               var(--#{$prefix}box-shadow-inset);
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

Fotogramas clave

Se utiliza para crear animaciones CSS para .progress-bar-animated. Incluido en scss/_progress-bar.scss.

scss/_progress.scss

scss/_progress.scss

@if $enable-transitions {
    @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
    }
}