Labels:
Se pueden agregar etiquetas a las barras de progreso colocando texto dentro de la barra de progreso.
Progress
Otra herramienta que presenta Bootstrap 4 son las barras de progreso. Normalmente se las utiliza para indicar cuanto se ha avanzado en una actividad.
Los componentes de progreso se construyen con dos elementos HTML, algo de CSS para establecer el ancho y algunos atributos. No se usa el elemento HTML5 <progress>, lo que garantiza que pueda apilar barras de progreso, animarlas y colocar etiquetas de texto sobre ellas.
- Se usa .progress como contenedor para indicar el valor máximo de la barra de progreso.
- Se usa la .progress-bar interna para indicar el progreso hasta el momento.
- La .progress-bar requiere un estilo en línea, una clase de utilidad o un CSS personalizado para establecer su ancho.
- La .progress-bar también requiere algunos atributos de rol y aria para que sea accesible.
Backgrounds:
Se pueden utilizar las clases contextuales bg-{success, info, warning, danger} dentro de .progress-bar para cambiar el color de la barra de progreso.
Barra de progreso compuesta:
Es posible crear una barra de progreso que esté constituida por varias barras que en su conjunto forman la barra total. Para este planteo se debe disponer una serie de div internos al div principal.
Barra a rayas:
Para aplicar una franja a través de un degradado CSS sobre el color de fondo de la barra de progreso se agrega .progress-bar-striped a cualquier .progress-bar.
Rayas animadas:
El degradado rayado también se puede animar. Agregando .progress-bar-animated a .progress-bar para animar las franjas de derecha a izquierda a través de animaciones CSS3.