Creación de una animación de carga con CSS

Aprender: Cómo crear una animación de carga en CSS? En este artículo vamos a aprender la creación de animación de carga en el CSS, el artículo contiene código CSS y archivo de demostración.

Cargando animaciones son muy comunes hoy en día. Cada aplicación o sitio web necesita algún tiempo para el proceso. Esto no se muestra al usuario, por lo que esto podría frustrar el usuario como nada podría estar sucediendo en la pantalla.

Cargando es una técnica donde se muestra una animación de carga, mientras que los datos se procesan en el fondo, para que el usuario sabe cuánto tiempo queda o al menos todavía algún procesamiento se produce en el fondo.

código CSS:

.loader {
width: 60px;
height: 60px;
background: transparent;
border: 10px solid transparent;
border-top-color: #f56;
border-left-color: #f56;
border-radius: 50%;
animation: loader .75s 10 ease forwards;
}
@keyframes loader {
100% {
transform: rotate(360deg);
}
}

Aquí seleccionamos la primera class cargador usando .loader selector. Ahora le damos algunos anchura y la altura, 60px es un número agradable. A continuación, le damos un fondo transparente, ya que queremos que el semicírculo que se logra a través de las fronteras.

Ahora le damos un borde sólido de 10px usando frontera: 10px sólida transparente. Dado que sólo queremos que los bordes superior e izquierdo class el círculo cargador, nosotros color sólo el borde superior e izquierdo utilizando border-top-color de y border-left-color de y los demás fronteras son colores transparentes.

Ahora bien, puesto que queremos que el semicírculo, utilizaremos la propiedad frontera de radio que simplemente hará que sea círculo. Todo el cuadro de 60x60px se convierte en círculo, pero sólo ver una curva de semicírculo, porque hemos dado fondo y los bordes de un color transparente.

Ahora definimos una animación cargador. El Transformar: Rotar (360deg) gira el elemento 360 con una animación suave. El 100% es el estado de objeto en la terminación de animación, que es girado por 360deg. El objeto llega a su posición original, ya que 360deg es físicamente igual a 0 grados.

Ahora llamando a la animación utilizando la animación: cargador de 5 .75s facilidad hacia delante, definimos 0,75 segundos class cada iteración que ocurrirá class 5 segundos. La facilidad es for transición suave hacia delante y el mantenimiento de su último estado después de que se complete la animación.

Salida:

DEMO

código HTML con CSS:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Loading Animation</title>
<style>
.loader {
width: 60px;
height: 60px;
background: transparent;
border: 10px solid transparent;
border-top-color: #f56;
border-left-color: #f56;
border-radius: 50%;
animation: loader .75s 10 ease forwards;
}
@keyframes loader {
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="loader"></div>
</body>
</html>

Juega con estas propiedades CSS para crear su propio Cargando animación.
feliz Cargando!


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *