Componentes de Bootstrap

Progreso

Una barra que muestra hasta dónde ha llegado algo: un curso, una subida, un cuestionario.

Una barra de progreso muestra una cantidad conocida de avance. Cuando no se conoce (esperando a un servidor), usa un indicador de carga.

Cuándo usarlo

Un riel (progress) y una o más barras (progress-bar) cuyo ancho es el valor. Una barra puede ir a rayas, animada y con una etiqueta.

Progreso

Las partes de un mismo total comparten un riel y se unen sin hueco, así que se leen como una sola barra. Una leyenda con puntos nombra cada color.

Apilada y conectada

Grading status65 of 100 submissions

Graded 40In review 15Late 10Pending 35

Un título y un valor encima, o el valor al lado. El texto lleva el número para que no tenga que llevarlo el color.

Con etiqueta

Unit 2 · Functions4 of 6 activities

42%

91% · 9.1 of 10 GB

60%

Para un flujo en pasos o una lista de lecciones, una barra pequeña por paso.

Pasos

Step 3 of 5Review

Alturas

Combinación	Para qué usarla
Barra simple × valor	Una barra, el número al lado o encima («64 %», «4 de 6 actividades»).
Apilada × total	Partes de un total en una barra, unidas, con una leyenda de puntos.
Pasos × flujo	Una barra pequeña por paso, las terminadas rellenas; con «Paso 3 de 5» encima.
Color × significado	Primario para progreso, éxito para lo completado, aviso y peligro cuando un límite está cerca (almacenamiento).
Rayas × espera	Con rayas y animada solo mientras algo trabaja de verdad.

Qué cambiamos	Por qué ayuda
Las barras de un total se unen sin hueco	Los huecos parecen cantidades separadas; una barra unida muestra un total repartido en partes.
Los extremos del riel son redondos, las uniones rectas	La barra se lee como un objeto y las partes se distinguen por el color, no por la forma.
El número siempre está escrito	El progreso no debe depender de adivinar un ancho: quien tiene poca visión o daltonismo lee el número.
Los pasos son barras pequeñas separadas	Quien cuenta pasos cuenta bloques; una barra larga esconde cuántos quedan.

Clase	Qué hace
`progress`	El riel; su altura marca la de la barra
`progress-bar`	La parte rellena; ancho en `style`
`progress-bar-striped`, `progress-bar-animated`	Rayas y movimiento
`bg-success`…	Color de una barra
`dd-progress`, `dd-progress-head`, `dd-progress-value`	Una barra de progreso con su título y valor (Didactika)
`dd-progress-inline`	El valor al lado de la barra (Didactika)
`dd-progress-steps`	Una barra pequeña por paso (Didactika)

Bootstrap 5.3 guarda sus colores en variables CSS (--bs-*), así que un tema recolorea el componente con una sola variable. El role va en el riel.

Bootstrap 4.6 compila sus colores en las clases, así que un tema recolorea el componente recompilando su hoja de estilos. El role va en cada barra.

role="progressbar" con aria-valuenow, aria-valuemin, aria-valuemax y un aria-label.
El valor también se escribe como texto cuando importa.
Las rayas animadas respetan la preferencia de movimiento reducido.