Cómo hacer un cargador usando CSS

Mientras usa cualquier aplicación, a veces es posible que tenga que esperar para ver el contenido hasta que se cargue. Para esto, los cargadores en sitios web o aplicaciones permiten que el usuario espere al mostrar algo de animación. En un sitio web, estos cargadores indican que el sistema no se ha bloqueado, y el contenido se mostrará después de un tiempo. Además, los cargadores animados proporcionan un aspecto atractivo que ayuda a mantener la atención del usuario en el sitio web.

Este artículo proporcionará instrucciones relacionadas con la creación de un cargador utilizando CSS.

Cómo hacer cargador usando CSS?

Con el fin de crear un cargador, en primer lugar, en HTML, agregue un elemento DIV con el nombre de la clase "cargador". Dentro de este elemento, coloque otro elemento Div con el nombre de la clase "cargador".

Html

Ahora, pase a la sección CSS, donde estos elementos se diseñarán para crear un cargador.

CSS

El estilo que vamos a aplicar se menciona a continuación.

Estilo todos los elementos

*
margen: 0;
relleno: 0;
dimensionamiento de la caja: border-box;
Font-Family: Verdana, Ginebra, Tahoma, Sans-Serif;

La explicación del código mencionado anteriormente se enumera a continuación:

• "*"El símbolo de asterisco se usa para representar todo tipo de elementos a los que se aplicarán estas propiedades.
• "margenLa propiedad se utiliza para dar espacio alrededor de un elemento. El valor "0"Significa que no habría margen alrededor de cada elemento HTML.
• "relleno"La propiedad especifica el espacio alrededor del contenido del elemento.
• "dimensionador"Propiedad con el valor"caja de fronteras"Indique que el borde y el relleno están incluidos en la altura y el ancho.
• "Familia tipográfica"Define la fuente del elemento.

Elemento de estilo "cuerpo"

cuerpo
Altura: 100 VH;
Color de fondo: RGB (53, 53, 53);

Las propiedades aplicadas al elemento del cuerpo se dan a continuación:

• "alturaLa propiedad se utiliza para establecer la altura del cuerpo. La unidad "VH"Representa que inicialmente, el elemento corporal toma el 100% de la altura de la ventana gráfica.
• "color de fondo"La propiedad establece el color de fondo del cuerpo.

Estilo "cargador" div Div

.cargador
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
Animación: carga de carga de 400 ms lineal infinito;

La descripción de las propiedades aplicadas al cargador Div de HTML se da a continuación:

• "posición"Propiedad con el valor"absoluto"Colocará el elemento del cargador en relación con sus padres.
• "arriba"La propiedad establece la posición vertical del div.
• "izquierda"La propiedad establece la posición horizontal del div.
• "animación"Es una propiedad abreviada que establece el nombre de la animación, la duración de la animación, la función de tiempo de animación y el retraso de la animación para el cargador.

Nota: El "spinner de carga"Es el nombre de animación, que se utilizará en la animación @Keyframes para especificar la animación.

Estilo "Loader-Inner" Div

.cargador .cargador-inner
Ancho: 60px;
Altura: 60px;
borde: 10px sólido transparente;
color de borde: #00c8b1;
Color de la izquierda fronteriza: #00C8B1;
Radio fronterizo: 50%;

El niño div de la cargadora div, con el nombre "cargador"Se aplica con propiedades que se describen a continuación:

• "ancho"La propiedad establece el ancho del elemento.
• "altura"La propiedad establece la altura del elemento.
• "borde"Especifica un borde con ancho, tipo de línea y color.
• "color de la altura fronteriza"Agrega color a la parte superior del borde.
• "color de la izquierda fronteriza"Agrega color a la izquierda del borde.
• "radio fronterizo"Especifica el radio de la frontera y lo hace redondo.

El cargador se crea con éxito y se verá así:

Establezcamos los fotogramas clave de animación del cargador creado anteriormente.

Establecer los cuadros de animación

@Keyframes Spinner de carga
0%
transformar: rotar (0deg);

100%
transformar: girar (360deg);

Los fotogramas clave en CSS definen la animación estableciendo su estilo con diferente duración:

• "@Keyframes Spinner de carga": El nombre de la animación"spinner de carga"Seguido de la palabra clave @Keyframes se usa para establecer la animación.
• "0%"Representa la animación al comienzo en el que se girará el cargador"0" grado.
• "100%"Representa la animación al final mientras gira el cargador en"360"Grados.

Nota: El nombre de la animación se especifica en el Div-Inner de Loader.

Producción

Fresco! Hemos creado con éxito un cargador animado con CSS.

Conclusión

En los sitios web, los cargadores se agregaron para obtener la atención del usuario hasta que el contenido obtenga cargas. Hay varias propiedades CSS utilizadas para hacer cargadores, como "animación"Y establecer los marcos de teclas de animación usando el"transformar" propiedad. Este artículo fue sobre hacer un cargador CSS y aplicarle animación.