Progress

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

Cómo funciona

Los componentes de progreso están construidos con dos elementos HTML, algo de CSS para establecer el ancho y algunos atributos. No utilizamos el <progress> elemento HTML5 , lo que garantiza 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 el interior .progress-bar para indicar el progreso hasta ahora.
  • El .progress-bar requiere un estilo en línea, clase de utilidad, o CSS personalizada para establecer su anchura.
  • El .progress-bar también requiere un poco role y aria atributos para que sea accesible.

Pon todo eso junto y tienes los siguientes ejemplos.


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

Bootstrap proporciona un puñado de utilidades para configurar el ancho . Dependiendo de sus necesidades, estos pueden ayudar a configurar rápidamente el progreso. 


  <div class="progress">
    <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

Etiquetas

Agregue etiquetas a sus barras de progreso colocando texto dentro del .progress-bar.

25%

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

Altura

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


  <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress" style="height: 20px;">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

Backgrounds

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


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

Varias barras

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


  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
    <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

A rayas

Agregue .progress-bar-striped a cualquiera .progress-bar para aplicar una raya a través de un degradado CSS sobre el color de fondo de la barra de progreso. 


  <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
  <div class="progress">
    <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
  </div>

Rayas animadas

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


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

Progress Small

Progress Small, tiene las mismas funcionalidades sin embargo la altura es mucho menor (5px or 0.3125rem) y ademas las esquinas son cuadradas. 


  <div class="progress progress-small">
    <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
  </div>