Breaking

Post Top Ad

Your Ad Spot

domingo, 10 de marzo de 2019

Cómo crear la animación del cargador con CSS

Un cargador es un elemento muy útil para cada proyecto web. Básicamente, usamos el cargador durante la carga de la página o del contenido. Cuando usamos Ajax para actualizar partes de una página web, necesitamos algún tiempo para obtener el contenido respectivo. En esta situación, el precargador es una opción perfecta para notificar al usuario que espere.
Puedes usar una imagen como precargador o crear un cargador CSS. Si desea crear una animación de cargador con CSS , este tutorial lo ayudará a crear una animación de cargador simple y liviana. Aquí proporcionaremos un breve fragmento de código CSS para crear un cargador simple con CSS y HTML.

Cargador estilo 1

El siguiente CSS genera un cargador de giro. Puede cambiar el color y el tamaño del cargador según el diseño de su sitio web.
Código CSS:
.loader {
     border-top :  16 px  solid  # 4285F4 ;
    borde derecho :  16 px  sólido  # EA4335 ;
    borde inferior :  16 px  sólido  # FBBC05 ;
    borde izquierdo :  16 px  sólido  # 34A853 ;
    radio del borde :  50 % ;
    ancho :  120 px ;
    altura :  120 px ;
    -webkit-animation : rotar 2 s lineales infinitos;
    Animación : rotar 2 s lineales infinitos;
}
@keyframes rotar {
    0% {transformar : rotar ( 0 grados ); }
    100% {transformar : rotar ( 360 grados ); }
}
@ -webkit-keyframes rotate {
    0% {-webkit-transform : rotar ( 0 grados ); }
    100% {-webkit-transform : rotar ( 360 grados ); }
}
Código HTML:
< div  class = "loader" > </ div >

Cargador de estilo 2

El siguiente CSS genera un cargador animado. Puede cambiar el color y el tamaño del cargador según el diseño de su sitio web.
Código CSS:
.loader , .loader : before , .loader : after {
     background :  # 000000 ;
    -webkit-animation : animate 1 s infinite eas- in-out;
    animación : animate 1 s infinite eas-in-out;
    ancho :  1 em ;
    altura :  4 em ;
}
.loader {
     color :  # 000000 ;
    texto-sangría :  -9999 em ;
    margen :  88 px  auto ;
    posición :  relativa ;
    tamaño de letra :  11 px ;
    -webkit-transform : translateZ ( 0 );
    -ms-transform : translateZ ( 0 );
    transformar : traducir Z ( 0 );
    -webkit-animation-delay :  -0.16 s ;
    animación-retraso :  -0.16 s ;
}
.loader : antes , .loader : después de {
     posición :  absoluta ;
    arriba :  0 ;
    contenido :  '' ;
}
.loader : antes {
     izquierda :  -1.5 em ;
    -webkit-animation-delay :  -0.32 s ;
    animación-retraso :  -0,32 s ;
}
.loader : después de {
     izquierda :  1.5 em ;
}
@ -webkit-keyframes animados {
    0%, 80%, 100% {
        caja de sombra :  0  0 ;
        altura :  4 em ;
    }
    40% {
        caja de sombra :  0  -2 em ;
        altura :  5 em ;
    }
}
@keyframes animate {
    0%, 80%, 100% {
          caja de sombra :  0  0 ;
          altura :  4 em ;
    }
    40% {
        caja de sombra :  0  -2 em ;
        altura :  5 em ;
    }
}
Código HTML:
< div  class = "loader" > </ div >

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas