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.
[Link] 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
[Link] 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
[Link] 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>
[Link] 4/4
