Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap Barras de Progreso
#1
Las barras de progreso permiten mostrar de forma continua el estado de ejecución de una tarea.
Compatibilidad con los navegadores
Las barras de progreso de Bootstrap 3 utilizan las transiciones y animaciones de CSS3 para algunos de sus efectos. Estas características no están disponibles en Internet Explorer 9 o anterior ni tampoco en las versiones antiguas de Firefox. Además, Opera 12 no soporta las animaciones de CSS3.
Ejemplo sencillo
El siguiente ejemplo muestra el código HTML recomendado para crear la barra de progreso, que incluye los atributos necesarios para mejorar su accesibilidad:
Código:
<div class="progress">
 <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
   <span class="sr-only">60% completado</span>
 </div>
</div>

Así se ve este ejemplo en tu navegador:
[Imagen: componentes-barra-progreso.png]
Barras de progreso contextuales
Como sucede con muchos otros componentes, Bootstrap 3 permite crear barras de progreso contextuales, que modifican su aspecto para adecuarlo al concepto de éxito, información, aviso o error. Ejemplo:

Código:
<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar"
      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
      style="width: 40%">
   <span class="sr-only">40% completado (éxito)</span>
 </div>
</div>
 
<div class="progress">
 <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
      style="width: 20%">
   <span class="sr-only">20% completado</span>
 </div>
</div>
 
<div class="progress">
 <div class="progress-bar progress-bar-warning" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
      style="width: 60%">
   <span class="sr-only">60% completado (aviso)</span>
 </div>
</div>
 
<div class="progress">
 <div class="progress-bar progress-bar-danger" role="progressbar"
      aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
      style="width: 80%">
   <span class="sr-only">80% completado (peligro / error)</span>
 </div>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-barra-progreso-contextual.png]
Barras de progreso cebreadas
Las barras cebreadas (del inglés “striped”) muestran un patrón de franjas oblicuas que modifican el aspecto básico de las barras de progreso por defecto. Como las franjas se crean con gradientes de CSS, este tipo de barras de progreso no funcionan en Internet Explorer 8. Ejemplo:

Código:
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-success" role="progressbar"
      aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"
      style="width: 40%">
   <span class="sr-only">40% completado (éxito)</span>
 </div>
</div>
 
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-info" role="progressbar"
      aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
      style="width: 20%">
   <span class="sr-only">20% completado</span>
 </div>
</div>
 
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-warning" role="progressbar"
      aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
      style="width: 60%">
   <span class="sr-only">60% completado (aviso)</span>
 </div>
</div>
 
<div class="progress progress-striped">
 <div class="progress-bar progress-bar-danger" role="progressbar"
      aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"
      style="width: 80%">
   <span class="sr-only">80% completado (peligro / error)</span>
 </div>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-barra-progreso-cebreada.png]
Barras de progreso animadas
Las barras de progreso animadas van un paso más allá de las anteriores barras de progreso cebreadas, ya que añaden una animación a las franjas. Este tipo de barras de progreso son ideales para las aplicaciones web, ya que el usuario tiene en todo momento la sensación de que su tarea está siendo atendida. Ninguna de estas barras de progreso animadas funcionan en Internet Explorer. Ejemplo:

Código:
<div class="progress progress-striped active">
 <div class="progress-bar" role="progressbar"
      aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"
      style="width: 45%">
   <span class="sr-only">45% completado</span>
 </div>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo (la imagen inferior no está animada):
[Imagen: componentes-barra-progreso-animada.png]
Barras de progreso segmentadas
Bootstrap 3 también permite crear barras de progreso compuestas por múltiples segmentos. Para ello, crea una barra de progreso por cada segmento y después enciérralos todos dentro de un elemento con la clase 
.progress

. Ejemplo:

Código:
<div class="progress">
 <div class="progress-bar progress-bar-success" style="width: 35%">
   <span class="sr-only">35% completado (éxito)</span>
 </div>
 <div class="progress-bar progress-bar-warning" style="width: 20%">
   <span class="sr-only">20% completado (aviso)</span>
 </div>
 <div class="progress-bar progress-bar-danger" style="width: 10%">
   <span class="sr-only">10% completado (peligro)</span>
 </div>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-barra-progreso-segmentada.png]
FUENTE
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW
#2
Tu aportes me encanta man, segui asi

Saludo.
[-] El post de agus1233211901 tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
#3
muy chulas las barras de progreso. Como siga asi me hare una web con tus explicaciones
[-] El post de efbsfcd tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
#4
Seadaptan de acuerdo al GUI de la web?
[-] El post de DaveNPlay tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
WWW
#5
esto s lo sabia gracias por compartilo
[Imagen: Nexo_Firma.gif]
[-] El post de ReyNexo23 tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
WWW
#6
La verdad es que bootstrap está muy bien como framework.
Últimamente tengo que currar con esto y estoy aprendiendo bastante,

También recomiendo coger alguna plantilla ya hecha que te permita coger más clases y ejemplos ya preparados.
Un saludo.
[Imagen: logo_300.png]
[-] El post de fercol tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
#7
Buenísimo, justo lo que estoy aprendiendo y me viene re bien, gracias!
Death Stranding en la E3 Huh ... Me quedaron más preguntas que respuestas  Astuto
[-] El post de Axelazo! tiene 1 Me Gusta de parte de:
  • cmascreativo.ml
#8
Muchas gracias a ustedes por darse el tiempo de ver mi publicación, que bueno que es sirva, se cumple el objetivo!
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Bootstrap Formulario Basico cmascreativo.ml 5 102 08-10-2018, 06:53 AM
Último mensaje: Boreas
  Bootstrap Listas cmascreativo.ml 6 118 05-10-2018, 11:00 PM
Último mensaje: fercol
  [Aporte] Botones en Bootstrap cmascreativo.ml 0 65 08-09-2018, 06:47 AM
Último mensaje: cmascreativo.ml
  LANZAMIENTO DE BOOTSTRAP 4.0.0 ALPHA Y ADIOS BOOTSTRAP 3 khristia 11 1,015 01-10-2016, 02:34 PM
Último mensaje: juanjj
  [Aporte] Curso completo Bootstrap habacuc78 10 959 06-02-2016, 04:50 AM
Último mensaje: habacuc78
  Cómo instalar Bootstrap habacuc78 3 453 22-12-2015, 10:33 PM
Último mensaje: Taquion
  Bootstrap Navbar torgar22 4 1,199 10-04-2015, 02:27 PM
Último mensaje: TheBomberbe
  Como crear un Código de Barras en PHP torgar22 1 594 25-03-2015, 04:33 AM
Último mensaje: garcon
  HTML5: Cómo crear una barra de progreso nativa con estilo imgur 0 500 19-11-2014, 11:17 PM
Último mensaje: imgur



Usuarios navegando en este tema: 1 invitado(s)