Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3
Usted ha visto las barras de progreso en todas partes, que son aquellas Barras de progreso con estilo CSS3 que muestran el estado actual de la finalización de un proceso, como una descarga o transferencia de archivos.
Ya sea que esté construyendo un escritorio o una aplicación web, en cierto punto, puede que tenga que utilizar este elemento de la interfaz de usuario.
Dicho esto, en este artículo usted aprenderá cómo crear elegantes y animadas barras de progreso utilizando CSS3.
El HTML
El margen de beneficio no puede ser más sencillo que eso:
<div class = "rayas azules barra de progreso" >
<span style = "width: 40%" > </ span>
</ div>.progress-bar– define los estilos generales de nuestra barra de progreso..Blue– en este caso, la clase CSS azul añadir un estilo azul para la barra de progreso..stripes– tipo de animación para la barra de progreso actual.palmo– esto le ayudará a llenar la barra de progreso. Un juego en líneaanchurale ayudará a que especifica el estado “llenar”.
El CSS
estilos generales de la barra de progreso CSS3 y el área de despacho:
.progress-bar {
background-color : #1a1a1a ;
height : 25px ;
padding : 5px ;
width : 350px ;
margin : 50px 0 ;
border-radius : 5px ;
box-shadow : 0 1px 5px #000 inset , 0 1px 0 #444 ;
}
.progress-bar span {
display : inline-block ;
height : 100% ;
border-radius : 3px ;
box-shadow : 0 1px 0 rgba ( 255 , 255 , 255 , .5 ) inset ;
transition : width .4s ease-in-out ;
}
Vamos a añadir un poco de color / gradientes :
.Blue lapso {
background-color : # 34c2e3 ;
}
.orange lapso {
background-color : # fecf23 ;
Imagen de fondo : lineal gradiente ( parte superior , # fecf23 , # fd9215 );
}
.green lapso {
background-color : # a5df41 ;
Imagen de fondo : lineal gradiente ( parte superior , # a5df41 , # 4ca916 );
}Rayas
Es posible que haya visto este técnica CSS3 antes, acabo adapté un poco para este ejemplo:
.stripes span {
background-size : 30px 30px ;
background-image : linear-gradient ( 135deg , rgba ( 255 , 255 , 255 , .15 ) 25% , transparent 25% ,
transparent 50% , rgba ( 255 , 255 , 255 , .15 ) 50% , rgba ( 255 , 255 , 255 , .15 ) 75% ,
transparent 75% , transparent );
animación : animados-rayas 3s lineal infinita ;
}
@keyframes animar-rayas {
0 % { background-position : 0 0 ;} 100 % { background-position : 60px 0 ;}
}
Brillar
No estoy seguro si este es el mejor nombre que pude encontrar para esta animación CSS3, pero aquí vamos:
.shine lapso {
posición : relativa ;
}
.shine span ::after {
content : '' ;
opacity : 0 ;
position : absolute ;
top : 0 ;
right : 0 ;
bottom : 0 ;
left : 0 ;
background : #fff ;
border-radius : 3px ;
animation : animate-shine 2s ease-out infinite ;
}
@keyframes animar-shine {
0 % { opacidad : 0 ; anchura : 0 ;}
50 % { opacidad : 0,5 ;}
100 % { opacidad : 0 ; anchura : 95% ;}
}En este ejemplo se utiliza la barra de progreso CSS3 CSS3 una :: después de pseudo-elemento que anima. En la actualidad, la animación de contenido generado con CSS3 sólo está disponible en los navegadores más recientes de Firefox . Espero que pronto será un apoyo más amplio para eso.
Brillo
Fotogramas clave CSS3 animación basada en la caja de sombra de la propiedad:
.glow span {
box-shadow : 0 5px 5px rgba ( 255 , 255 , 255 , .7 ) inset , 0 -5px 5px rgba ( 255 , 255 , 255 , .7 ) inset ;
animation : animate-glow 1s ease-out infinite ;
}
@keyframes animate-glow {
0 % { box-shadow : 0 5px 5px rgba ( 255 , 255 , 255 , .7 ) inset , 0 -5px 5px rgba ( 255 , 255 , 255 , .7 ) inset ;}
50 % { box-shadow : 0 5px 5px rgba ( 255 , 255 , 255 , .3 ) inset , 0 -5px 5px rgba ( 255 , 255 , 255 , .3 ) inset ;}
100 % { box-shadow : 0 5px 5px rgba ( 255 , 255 , 255 , .7 ) inset , 0 -5px 5px rgba ( 255 , 255 , 255 , .7 ) inset ;}
}
¿Qué pasa con los navegadores más antiguos?
Las barras de progreso se ven bastante bien gracias a una degradación elegante.
¡Eso es todo!
Para mayor desarrollo de la tela, para conseguir el resultado que deseas, sólo tiene que jugar con jQuery JavaScript o para cambiar el período de ‘s ancho valor de estas barras de progreso.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros