barra de progreso Bootstrap
En este capítulo se explicará barra de progreso Bootstrap. En este tutorial, verás cómo crear barra de progreso de carga Bootstrap, redirigir o estado de funcionamiento.
Bootstrap barra de progreso a través de las transiciones y animaciones CSS3 para conseguir el efecto. Las versiones anteriores de Internet Explorer y Firefox 9 y versiones anteriores no es compatible con esta característica, Opera 12 no admite animaciones.
La barra de progreso por defecto
Crear una barra de progreso básicos, siga estos pasos:
- Añadir un .progressclase con el <div>.
- Luego, en el anterior <div> dentro, agregar unaclase .progress-bar con un elemento <div>.
- Añadir un atributo de estilo con una anchura expresada como un porcentaje, como el estilo = "60%"; 60% representa la ubicación de la barra de progreso.
Veamos los siguientes ejemplos:
Ejemplos
<Div class = "progreso">
<Div class = "barra de progreso" role = "progressbar" aria-ValueNow = "60"
aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%; ">
<span class = "sr-only"> 40% completado </ span>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
barra de progreso alternativo
Para crear una barra de progreso estilo diferente de la siguiente manera:
- Añadir un .progressclase con el <div>.
- Luego, en el anterior <div> dentro, agregar unaclase .progress-bar y *clase vacíaprogreso de barrascon un <div>. Donde * puede serel éxito, información, advertencia, peligro.
- Añadir un atributo de estilo con una anchura expresada como un porcentaje, como el estilo = "60%"; 60% representa la ubicación de la barra de progreso.
Veamos los siguientes ejemplos:
Ejemplos
<Div class = "progreso">
<Div class = "progreso- barra de progreso bar-éxito" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<span class = "sr-only"> 90% completa (con éxito) </ span>
</ Div>
</ Div>
<Div class = "progreso">
<Div class = "progreso- barra de progreso bar-info" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completa (Información) </ span>
</ Div>
</ Div>
<Div class = "progreso">
<Div class = "barra de progreso progreso- barra de alerta" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completa (advertencia) </ span>
</ Div>
</ Div>
<Div class = "progreso">
<Div class = "progreso- barra de progreso bar-peligro" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<span class = "sr-only"> 10% completa (peligro) </ span>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
rayas barra de progreso
Crear una barra de progreso de la raya, siga estos pasos:
- Adición de unaclase y .progress .progress a rayasdel <div>.
- Luego, en el anterior <div> dentro, agregar unaclase .progress-bar y *clase vacíaprogreso de barrascon un <div>. Donde * puede serel éxito, información, advertencia, peligro.
- Añadir un atributo de estilo con una anchura expresada como un porcentaje, como el estilo = "60%"; 60% representa la ubicación de la barra de progreso.
Veamos los siguientes ejemplos:
Ejemplos
<Div class = "progreso progreso de rayas" >
<Div class = "progreso- barra de progreso bar-éxito" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 90%; ">
<span class = "sr-only"> 90% completa (con éxito) </ span>
</ Div>
</ Div>
<Div class = "progreso progreso de rayas" >
<Div class = "progreso- barra de progreso bar-info" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completa (Información) </ span>
</ Div>
</ Div>
<Div class = "progreso progreso de rayas" >
<Div class = "barra de progreso progreso- barra de alerta" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completa (advertencia) </ span>
</ Div>
</ Div>
<Div class = "progreso progreso de rayas" >
<Div class = "progreso- barra de progreso bar-peligro" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 10%; ">
<span class = "sr-only"> 10% completa (peligro) </ span>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
barra de progreso animada
Crear una barra de progreso animada, siga estos pasos:
- Adición de unaclase y .progress .progress a rayasdel <div>. Mientras que la adición .activeclase.
- Luego, en el anterior <div> dentro, agregar unaclase .progress-bar con un elemento <div>.
- Añadir un atributo de estilo con una anchura expresada como un porcentaje, como el estilo = "60%"; 60% representa la ubicación de la barra de progreso.
Esto hará que las rayas tienen un sentido del movimiento de derecha a izquierda.
Veamos los siguientes ejemplos:
Ejemplos
<Div class = "progreso progreso de rayas activa ">
<Div class = "progreso- barra de progreso bar-éxito" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<span class = "sr-only"> 40% completado </ span>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
barra de progreso apilada
Incluso puedes apilar múltiples barra de progreso. barras de progreso múltiples en la misma pila.progress se pueden realizar, como se muestra en los siguientes ejemplos:
Ejemplos
<Div class = "progreso">
<Div class = "progreso- barra de progreso bar-éxito" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 40%; ">
<span class = "sr-only"> 40% completado </ span>
</ Div>
<Div class = "progreso- barra de progreso bar-info" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 30%; ">
<span class = "sr-only"> 30% completa (Información) </ span>
</ Div>
<Div class = "barra de progreso progreso- barra de alerta" role = "progressbar"
aria-ValueNow = "60" aria-valuemin = "0" aria-valuemax = "100"
style = "width: 20%; ">
<span class = "sr-only"> 20% completa (advertencia) </ span>
</ Div>
</ Div>
Trate »
Los resultados son los siguientes:
