Martes, 09 Junio 2026

Misa por el 50 aniversario del IESC, Chiclayo
Misa de aniversario en la iglesia de la Compañía, Arequipa
Misa por el 50 aniversario del IESC en la Parroquia de Santa Rita, Miraflores
Asistentes al brindis con motivo del 50 aniversario del IESC
El presidente del IESC saluda al Papa Francisco en el marco de la conferencia internacional ‘Salvar nuestra casa común y el futuro de la vida sobre la tierra’.
P. Juan Roger Rodríguez en la firma de su libro: 'El Estado peruano, ni confesional ni laico'
(Izq. a der.) Armando Borda, Hans Schelkshorn, Andreas Rendl en el Foro Social Cristiano 'Desafíos para Europa: El Populismo'
Presentación del libro: Evangélicos y poder en América Latina. Autor: José Luis Pérez Guadalupe
(Izq. a der.) Armando Borda, Sebastian Grundberger, Peter Weiss en el Foro Social Cristiano: El Desafío Populista en Europa
Firma del convenio de cooperación de la Universidad Católica de Lublin y el IESC. 10 de mayo.
Seminario Internacional: Políticos cristianos frente a los desafíos globales.
FSC: La Iglesia ante la crisis social en Venezuela

Noticias

Revista Testimonio

Progress bars

Categoría de nivel principal o raíz: Demo
Categoría: Bootstrap
Escrito por Super User
Creado: 09 Noviembre 2012
Visto: 614

Basic

Default progress bar with a vertical gradient.

 
  1. <div class="progress">
  2.  <div class="bar" style="width: 60%;"></div>
  3. </div>

Striped

Uses a gradient to create a striped effect. Not available in IE7-8.

 
  1. <div class="progress progress-striped">
  2.  <div class="bar" style="width: 20%;"></div>
  3. </div>

Animated

Add .active to .progress-striped to animate the stripes right to left. Not available in all versions of IE.

 
  1. <div class="progress progress-striped active">
  2.  <div class="bar" style="width: 40%;"></div>
  3. </div>

Stacked

Place multiple bars into the same .progress to stack them.

 
 
 
  1. <div class="progress">
  2.  <div class="bar bar-success" style="width: 35%;"></div>
  3.  <div class="bar bar-warning" style="width: 20%;"></div>
  4.  <div class="bar bar-danger" style="width: 10%;"></div>
  5. </div>

Options

Additional colors

Progress bars use some of the same button and alert classes for consistent styles.

 
 
 
 
  1. <div class="progress progress-info">
  2.  <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success">
  5.  <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning">
  8.  <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger">
  11.  <div class="bar" style="width: 80%"></div>
  12. </div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

 
 
 
 
  1. <div class="progress progress-info progress-striped">
  2.  <div class="bar" style="width: 20%"></div>
  3. </div>
  4. <div class="progress progress-success progress-striped">
  5.  <div class="bar" style="width: 40%"></div>
  6. </div>
  7. <div class="progress progress-warning progress-striped">
  8.  <div class="bar" style="width: 60%"></div>
  9. </div>
  10. <div class="progress progress-danger progress-striped">
  11.  <div class="bar" style="width: 80%"></div>
  12. </div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Eventos

Últimos Libros