En las páginas web, a menudo se ven los efectos de la barra de progreso, como bisecar el sistema, el estado de carga, etc. El componente de la barra de progreso utiliza los atributos de transición y animación de CSS3 para completar algunos efectos especiales. Estos efectos especiales no son compatibles con IE9 y por debajo de las versiones de IE9 y Firefox, y Opera 12 no admite atributos de animación.
La barra de progreso es como otros componentes independientes, los desarrolladores pueden elegir la versión correspondiente de acuerdo con sus necesidades:
Menos: Barras de progreso.
Sass: _progress-bars.scss
Barra de progreso básico
Principio de implementación:
Se requieren dos contenedores. El contenedor exterior usa el nombre de clase. Progress y el subcontainer usa el nombre de clase. donde se utiliza el progreso para establecer el color de fondo del contenedor de la barra de progreso, la altura, el espacio, etc.; y.. La barra de progreso establece la dirección de progreso, el color de fondo y el efecto excesivo de la barra de progreso; El siguiente es el código fuente CSS:
progreso {altura: 20px; margin-bottom: 20px; desbordamiento: oculto; en segundo plano: #f5f5f5; border-radius: 4px; -webkit-box-shadow: INSET 0 1PX 2PX RGBA (0, 0, 0, .1); box-shadow: INSET 0 1PX 2PX RGBA (0, 0, 0, .1); {float: left;width: 0;height: 100%;font-size: 12px;line-height: 20px;color: #ffff;text-align: center;background-color: #428bca;-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);-WebKit-Transition: ancho de .6 facilita; transición: ancho .6s facilidad;}ejemplo:
<div> <div role = "ProgressBar" Aria-Valuenow = "30" Aria-Valuemin = "0" Aria-Valuemax = "100"> <span> 30%</span> </div> </div>
Función de atributo de roles: dice los motores de búsqueda que la función de este DIV es la barra de progreso;
ARIA-VALUNOW = "30" Función de atributo: el progreso de la barra de progreso actual es del 40%;
Aria-valuemin = "0" Función de atributo: el valor mínimo de la barra de progreso es 0%;
Aria-Valuemax = "100" Función de atributo: el valor máximo de la barra de progreso es del 100%;
Puede eliminar la etiqueta <span> con el conjunto de clases .Sr-Playly desde el componente de la barra de progreso para permitir que se muestre el progreso actual;
<div> <div role = "ProgressBar" Aria-Valuenw = "40" Aria-Valuemin = "0" Aria-Valuemax = "100"> 40%</div> </div>
Barra de progreso colorido
La barra de progreso coloreada es la misma que la barra de progreso de advertencia. Para brindar a los usuarios una mejor experiencia, los diferentes colores de la barra de progreso también se configuran según diferentes estados, principalmente incluyendo los siguientes cuatro tipos:
Progress-Bar-Info: representa la barra de progreso de la información, azul
Progress-Bar-Success: indica la barra de progreso de éxito, verde
Progress-Bar-Warning: indica la barra de progreso de advertencia, amarillo
Progress-Bar-Danger: indica la barra de progreso del error, rojo
Código fuente de CSS:
.Progress-Bar-Success {Background-Color: #5CB85C;}. Progress-Bar-Info {Background-Color: #5BC0DE;}. Progress-Bar-Barning {Background-Color: #F0AD4E;}. Progress-Bar-Danger {en segundo plano: #D9534F;}Cómo usar:
Simplemente agregue el nombre de clase correspondiente a la barra de progreso básica
ejemplo:
<h1> barra de progreso colorido </h1> <div> <div role = "Progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </div> <div> <div role = "progressbar" aria-valuemax = "40" aria-valuemax = "100" 100 "100" 100 "100" aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenw = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <d "rol =" progressbar "aria-valuenow =" 40 "aria-valuaMaxeMaxeMaxeMaxiMax =" 100 "100" 100 " aria-valuemin = "0"> 60%</div> </div>
Los efectos son los siguientes:
Barra de progreso a rayas
La barra de progreso a rayas utiliza el gradiente lineal de CSS3. No usa ninguna imagen. El uso de la barra de progreso rayado solo requiere agregar el nombre de clase "rayado de progreso" al contenedor de la barra de progreso. Progreso. Si desea hacer una franja de progreso como un progreso en color y tiene un efecto de color, solo necesita agregar el nombre de clase de color correspondiente a la barra de progreso.
El siguiente es el código fuente de estilo .progress-striped:
.progress-striped .progress-bar {background-image: -webkit-lineal-gradiente (45deg, RGBA (255, 255, 255, .15) 25%, transparente 25%, transparente 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, 75%, transparente, transparente, 75%, 75%, 75%, Transparent transparent 75%, transparent );background-image:linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparente); tamaño de fondo: 40px 40px;}Cada estado correspondiente al progreso de la racha también tiene un color diferente
.Progress-striped .Progress-Bar-Success {Background-Image: -WebKit-Lineal-Dinter 75%, transparente 75%, transparente); imagen de fondo: gradiente lineal (45deg, RGBA (255, 255, 255, .15) 25%, transparente 25%, transparente 25%, .15) 25%, transparente 25%, transparente 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, 255, 255, 255). 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparente 75%, transparente); antecedentes-imagen: condición lineal (45deg, RGBA (255, 255, 255, .15) 25%, transparente 25%, transparente 50%, RGBA (255, 255, 255, 255, 255, 255). 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);}.progress-striped .progress-bar-warning {background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, .15) 75%, transparent 75%, transparente); 75%, transparente);}. Estripado por progreso .Progress-Bar-Danger {Background-Image: -WebKit-Lineal-Dintere (45deg, RGBA (255, 255, 255, .15) 25%, transparente 25%, transparente 50%, RGBA (255, 255, .15) 50%, RGBA (255, 255, 15%, 75%). 75%, transparente); Image de fondo: gradiente lineal (45deg, RGBA (255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255) 25%, transparente 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, transparente 75%, transparente);}Echemos un vistazo al uso de barras de progreso a rayas:
<h1> barra de progreso rayado </h1> <div> <div role = "Progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </div> <div> <div role = "progressbar" aria-valuemax = "40" aria-valuemax = "100" 100 "100" 100 " aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenw = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <d "rol =" progressbar "aria-valuenow =" 40 "aria-valuaMaxeMaxeMaxeMaxiMax =" 100 "100" 100 " aria-valuemin = "0"> 60%</div> </div>
Barra de progreso de rayas dinámicas
La barra de progreso de rayas dinámicas se puede realizar en función de la barra de progreso. Progress y.
El principio de implementación se realiza principalmente a través de la animación de CSS3. Primero, se crea una animación de rayas de la barra de progreso a través de @Keyframes. Esta animación hace principalmente una cosa, que es cambiar la posición de la imagen de fondo, es decir, el valor de la posición de fondo. Porque la barra de progreso a rayas se realiza a través del gradiente lineal de CSS3, y el gradiente lineal implementa la imagen de fondo correspondiente al fondo
Aquí está el código fuente de CSS:
@-webkit-keyframes progress-bar-stripes {de {en segundo plano: 40px 0;} a {Posición de fondo: 0 0;}}@Keyframes-Bar-Bar-stripes {de {Posicionamiento de fondo: 40px 0;} a {Posición de fondo: 0 0;}}@Keyframes solo crea un efecto de animación. Si queremos que la barra de progreso realmente se mueva, necesitamos llamar a la animación "Stripes de la barra de progreso" creada por @Keyframes de cierta manera, y activar la animación para entrar en vigencia a través de un evento. En el marco Bootstrap, agregue un nombre de clase "Active" al contenedor de la barra de progreso "Progress" y deje que la carga del documento se complete y toque la animación de "rayas de barras de progreso" para entrar en vigencia
El código de estilo correspondiente para la animación de llamadas es el siguiente:
.progress.active .progress-bar {-webkit-animation: progreso-bar-stripes 2s lineal infinito; animación: progreso-bar-stripes 2s lineal infinito;}ejemplo:
<h1> barra de progreso de rayas dinámicas </h1> <div> <div role = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 25%</div> </div> <div> <divs rol = "progressbar" aria-valuemax = "40" aria-valuemax 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" aria-valuemax = "0"> 40%</div> </div> <div> <div role = "progressbar" aria-valuenw = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <d "rol =" progressbar "aria-valuenow =" 40 "aria-valuaMaxeMaxeMaxeMaxiMax =" 100 "100" 100 " aria-valuemin = "0"> 60%</div> </div>
El efecto es el siguiente (ya que es una imagen que proviene directamente del resultado en la página web, no puede ver su efecto dinámico aquí):
Barra de progreso en cascada:
El progreso de apilamiento puede juntar las barras de progreso incompatibles y organizarlas horizontalmente.
ejemplo:
<Div> <Viv> </div> <div> </div> <div> </div> <div> </div> <div> </div>
Además de apilar barras de progreso de color, también puede apilar barras de progreso a rayas, o mezclar y apilar barras de progreso a rayas con barras de progreso de color. Solo necesita agregar las barras de progreso correspondientes al contenedor "progreso". También tenga en cuenta que la suma de las barras de progreso apiladas no puede ser superior al 100%.
Echemos un vistazo a un ejemplo:
<Div> <Viv> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
Esta es una explicación detallada del conocimiento del componente de la barra de progreso de Bootstrap. ¡Espero que sea útil para todos!