Progreso

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

En esta página

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

Cómo funciona

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

Usamos .progress como un 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, incluido un nombre accesible (usando aria-label, aria-labelledby, o similar).
Usamos el .progress-bar interno puramente para la barra visual y la etiqueta.
La .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

Ancho

Bootstrap proporciona un puñado de utilidades para establecer el ancho. Dependiendo de tus necesidades, estas pueden ayudar 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, la .progress-bar interna cambiará automáticamente de tamaño en consecuencia.

html

<div class="progress" role="progressbar" aria-label="Ejemplo de 1px de altura" 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 de 20px de altura" 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 de .progress-bar.

25%

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>

Etiquetas largas

Ten en cuenta que, de forma predeterminada, el contenido dentro de .progress-bar se controla con overflow: hidden, por lo que no se sale de la barra. Si tu barra de progreso es más corta que su etiqueta, el contenido se recortará y puede resultar ilegible. Para cambiar este comportamiento, puedes utilizar .overflow-visible de las utilidades de desbordamiento (overflow).

Las etiquetas más largas que la barra de progreso en su interior pueden no ser completamente accesibles usando este método porque depende de que el color del texto tenga la relación de contraste correcta con los colores de fondo de .progress y .progress-bar. Ten precaución 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 una mejor accesibilidad.

Fondos

Utiliza clases de utilidad de fondo para cambiar la apariencia de las barras de progreso individuales.

html

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

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

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

25%

50%

75%

100%

html

<div class="progress" role="progressbar" aria-label="Ejemplo de éxito (Success)" 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="Ejemplo de información (Info)" 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="Ejemplo de advertencia (Warning)" 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="Ejemplo de peligro (Danger)" 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 las .progress-bar.

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>

A rayas

Agrega .progress-bar-striped a cualquier .progress-bar para aplicar una raya a través de un gradiente CSS sobre el color de fondo de la barra de progreso.

html

<div class="progress" role="progressbar" aria-label="Ejemplo con rayas 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 con rayas Success" 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 con rayas Info" 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 con rayas Warning" 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 con rayas Danger" 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 gradiente a rayas también se puede animar. Agrega .progress-bar-animated a .progress-bar para animar las rayas de derecha a izquierda a través de animaciones CSS3.

html

<div class="progress" role="progressbar" aria-label="Ejemplo con 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>

CSS

Variables

Agregado en v5.2.0

Como parte del enfoque evolutivo de las variables CSS 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

--#{$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 de 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

Se utiliza para crear las animaciones CSS para .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); }
  }
}