You are here
Barras de progreso con estilo CSS3 Sin categoría 

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.

Barras de progreso con estilo CSS3
Barras de progreso con estilo 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ínea anchura le 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 ;     
}
Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3
 

 

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 ;} 
}

Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3
 

 

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.

Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3

 

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 ;} 
 }
Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3
 

 

¿Qué pasa con los navegadores más antiguos?

Barras de progreso con estilo CSS3
Barras de progreso con estilo CSS3

 

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

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información

Related posts