Ejemplos

Los componentes de progreso se crean con dos elementos HTML, algo de CSS para establecer el ancho y algunos atributos. No usamos el elemento & lt; progress & gt; HTML5 < / a>, asegurándose de que pueda apilar barras de progreso, animarlas y colocar etiquetas de texto sobre ellas.

  • Usamos .progress como envoltorio para indicar el valor máximo de la barra de progreso.
  • Usamos la .progress-bar interna para indicar el progreso hasta ahora.
  • El .progress-bar requiere un estilo en línea, una clase de utilidad o un CSS personalizado para establecer su ancho.
  • El .progress-bar también requiere algunos atributos role y aria para que sea accesible.

Pon todo eso junto y tienes los siguientes ejemplos.

Altura

Solo establecemos un valor de altura en .progress , por lo que si cambia ese valor, la .progress-bar interna cambiará de tamaño automáticamente en consecuencia.

25%
50%
75%
99%

Rayas animadas

El degradado de rayas también se puede animar. Agregue .progress-bar-animated a .progress-bar para animar las franjas de derecha a izquierda mediante animaciones CSS3.

Etiquetas

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

25%
50%
75%
99%

Fondos

Utilice clases de utilidad en segundo plano para cambiar la apariencia de las barras de progreso individuales.

Varias barras

Incluya varias barras de progreso en un componente de progreso si es necesario.

A rayas

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