Progress

Documentación y ejemplos para usar las barras de progreso personalizadas de Bootstrap, con soporte para barras apiladas, fondos animados y etiquetas de texto.

On this page

Nuevo markup en v5.3.0 — Hemos dejado de usar la estructura HTML anterior para las barras de progreso y la hemos reemplazado por una más accesible. La estructura anterior seguirá funcionando hasta v6. Mira qué ha cambiado en nuestra guía de migración.

Cómo funciona

Los componentes de progreso se construyen con dos elementos HTML, algo de CSS para establecer el ancho, y algunos atributos. No usamos el elemento <progress> de HTML5, lo que asegura que puedes 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 un role="progressbar" y atributos aria para hacerlo accesible, incluyendo un nombre accesible (usando aria-label, aria-labelledby o similar).
Usamos el .progress-bar interno puramente para la barra visual y la etiqueta.
El .progress-bar requiere un estilo en línea, clase utilitaria o CSS personalizado para establecer su ancho.
Proporcionamos una clase especial .progress-stacked para crear múltiples barras de progreso apiladas.

Juntando todo, tienes los siguientes ejemplos.

html

<div class="progress" role="progressbar" aria-label="Basic example" 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="Basic example" 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="Basic example" 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="Basic example" 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="Basic example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar" style="width: 100%"></div>
</div>

Tamaño de la barra

Ancho

Bootstrap proporciona un puñado de utilidades para establecer el ancho. Según tus necesidades, estas pueden ayudar a configurar rápidamente el ancho del .progress-bar.

html

<div class="progress" role="progressbar" aria-label="Basic example" 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 interno se redimensionará automáticamente en consecuencia.

html

<div class="progress" role="progressbar" aria-label="Example 1px high" 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="Example 20px high" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="height: 20px">
  <div class="progress-bar" style="width: 25%"></div>
</div>

Etiquetas

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

25%

html

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

Etiquetas largas

Ten en cuenta que por defecto, el contenido dentro del .progress-bar se controla con overflow: hidden, por lo que no se desborda de la barra. Si tu barra de progreso es más corta que su etiqueta, el contenido se recortará y puede volverse ilegible. Para cambiar este comportamiento, puedes usar .overflow-visible de las utilidades de overflow.

Las etiquetas más largas que la barra de progreso pueden no ser totalmente accesibles usando este método porque depende de que el color del texto tenga el ratio de contraste correcto con los colores de fondo tanto del .progress como del .progress-bar. Ten cuidado al implementar este ejemplo.

Si el texto puede superponerse a la barra de progreso, a menudo recomendamos mostrar la etiqueta fuera de la barra de progreso para mejor accesibilidad.

Fondos

Usa las clases utilitarias de fondo para cambiar la apariencia de las barras de progreso individuales.

html

<div class="progress" role="progressbar" aria-label="Success example" 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="Info example" 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="Warning example" 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="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-danger" style="width: 100%"></div>
</div>

Consejo de accesibilidad: Usar color para añadir 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 por el contenido mismo (p. ej., el texto visible con un suficiente contraste de color) o se incluya mediante medios alternativos, como texto adicional oculto con la clase .visually-hidden.

Si estás añadiendo etiquetas a barras de progreso con un color de fondo personalizado, asegúrate de establecer también un color de texto apropiado, para que las etiquetas sigan siendo legibles y tengan suficiente contraste. Recomendamos usar las clases helper de color y background.

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Success example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-success" style="width: 25%">25%</div>
</div>
<div class="progress" role="progressbar" aria-label="Info example" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-info" style="width: 50%">50%</div>
</div>
<div class="progress" role="progressbar" aria-label="Warning example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress" role="progressbar" aria-label="Danger example" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
</div>

Múltiples barras

Puedes incluir múltiples componentes de progreso dentro de un contenedor con .progress-stacked para crear una sola 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 a los .progress-bar.

html

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" 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="Segment two" 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="Segment three" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <div class="progress-bar bg-info"></div>
  </div>
</div>

Rayado

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

html

<div class="progress" role="progressbar" aria-label="Default striped example" 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="Success striped example" 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="Info striped example" 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="Warning striped example" 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="Danger striped example" 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

El degradado rayado también puede animarse. Agrega .progress-bar-animated al .progress-bar para animar las rayas de derecha a izquierda mediante animaciones CSS3.

html

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

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque evolutivo de variables CSS de Bootstrap, las barras de progreso ahora usan variables CSS locales en .progress para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

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

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;

Keyframes

Usado para crear las animaciones CSS de .progress-bar-animated. Incluido en scss/_progress-bar.scss.

scss/_progress.scss

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