14/9/2019 Progreso · Bootstrap

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

Aumente los ingresos de

su aplicación con la
demanda de calidad de los
anuncios de
anunciantes globales de
Facebook a
través de Carbon

Cómo funciona
Los componentes de progreso se crean con dos elementos HTML, algunos 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 el .progresscomo contenedor para indicar el valor máximo de la barra de progreso.

Usamos lo interno .progress-barpara indicar el progreso hasta ahora.
El .progress-barrequiere un estilo en línea, clase de utilidad, o CSS personalizada para
establecer su anchura.
El .progress-bartambién requiere algunos roley ariaatributos para hacerlo accesible.

Pon todo junto y tendrás los siguientes ejemplos.

Copiar
<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, esto puede ayudar a configurar rápidamente el progreso.

https://getbootstrap.com/docs/4.3/components/progress/ 1/4
14/9/2019 Progreso · Bootstrap

Copiar
<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 de .progress-bar.

25%

Copiar
<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 heightvalor en .progress, por lo que si cambia ese valor, el interno .progress-
barse redimensionará automáticamente en consecuencia.

Copiar
<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>

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

Copiar

https://getbootstrap.com/docs/4.3/components/progress/ 2/4
14/9/2019 Progreso · Bootstrap

<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>

Barras múltiples
Incluya varias barras de progreso en un componente de progreso si lo necesita.

Copiar
<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-stripeda cualquiera .progress-barpara aplicar una franja a través del
gradiente CSS sobre el color de fondo de la barra de progreso.

Search...

Empezando
Diseño

Contenido Copiar

Componentes
Alertas

Distintivo

Migaja de pan

Botones

Grupo de botones

Tarjeta

Carrusel

Colapso

Listas deplegables

Formas
https://getbootstrap.com/docs/4.3/components/progress/ 3/4
14/9/2019 Progreso · Bootstrap
Formas

Grupo de entrada <div class="progress">

Jumbotron <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
Lista de grupo
</div>
Objeto multimedia <div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar"
Modal
style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
Navs </div>
Barra de navegación <div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar"
Paginación
style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
Popovers </div>
Progreso <div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
Scrollspy
style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
Hiladores </div>
<div class="progress">
Tostadas
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
Información sobre herramientas style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Utilidades

Ampliar
Migración

Acerca de
Rayas animadas
El degradado rayado también se puede animar. Agregue .progress-bar-animateda .progress-barpara
animar las rayas de derecha a izquierda a través de animaciones CSS3.

Activar animación

Copiar
<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>

https://getbootstrap.com/docs/4.3/components/progress/ 4/4