Introducción

Un cargador (o control giratorio de carga) mejora la experiencia del usuario al proporcionar información visual durante los tiempos de carga. En este tutorial, crearemos un cargador elegante y moderno usando HTML y CSS. ¡Vamos a sumergirnos!

¿Qué es un cargador?

Un cargador es un elemento animado que indica que se está procesando contenido. Asegura a los usuarios que la aplicación está funcionando, lo que reduce la posibilidad de frustración durante los tiempos de carga.

¿Por qué utilizar un cargador?

• Mejora la experiencia del usuario: mantiene a los usuarios informados mientras esperan.
• Mejora la estética: un cargador bien diseñado puede hacer que su sitio web luzca más profesional.
• Evita el abandono del usuario: al proporcionar comentarios visuales, es menos probable que los usuarios se vayan mientras esperan.

Paso 1: Configurar la estructura HTML
Comenzaremos con la estructura HTML básica de nuestro cargador. El siguiente código crea un contenedor para el cargador con doce barras.

Paso 2: Aplicar estilo con CSS
A continuación, agregaremos CSS para darle estilo al cargador. Aquí está el código para crear un cargador circular con barras animadas.

`.cargador {
posición: relativa;
ancho: 54px;
altura: 54px;
radio del borde: 10px;
}

.cargador div {
ancho: 8%;
altura: 24%;
fondo: rgb(128, 128, 128);
posición: absoluta;
izquierda: 50%;
arriba: 30%;
opacidad: 0;
radio del borde: 50px;
sombra de cuadro: 0 0 3px rgba(0,0,0,0.2);
animación: fade458 1s infinito lineal;
}

@keyframes fade458 {
de {
opacidad: 1;
}

a {
opacidad: 0,25;
}
}`

Paso 3: Agregar animación
Aplicaremos retrasos de rotación y animación a cada barra para crear un efecto de carga dinámica.

`.cargador .bar1 {
transformar: rotar (0 grados) traducir (0, -130%);
retardo de animación: 0s;
}

.cargador .bar2 {
transformar: rotar (30 grados) traducir (0, -130%);
retardo de animación: -1.1s;
}

.cargador .bar3 {
transformar: rotar (60 grados) traducir (0, -130%);
retardo de animación: -1s;
}

.cargador .bar4 {
transformar: rotar (90 grados) traducir (0, -130%);
retardo de animación: -0,9 s;
}

.cargador .bar5 {
transformar: rotar (120 grados) traducir (0, -130%);
retardo de animación: -0,8 s;
}

.cargador .bar6 {
transformar: rotar (150 grados) traducir (0, -130%);
retardo de animación: -0,7 s;
}

.cargador .bar7 {
transformar: rotar (180 grados) traducir (0, -130%);
retardo de animación: -0,6 s;
}

.cargador .bar8 {
transformar: rotar (210 grados) traducir (0, -130%);
retardo de animación: -0,5 s;
}

.cargador .bar9 {
transformar: rotar (240 grados) traducir (0, -130%);
retardo de animación: -0,4 s;
}

.cargador .bar10 {
transformar: rotar (270 grados) traducir (0, -130%);
retardo de animación: -0,3 s;
}

.cargador .bar11 {
transformar: rotar (300 grados) traducir (0, -130%);
retardo de animación: -0,2 s;
}

.cargador .bar12 {
transformar: rotar (330 grados) traducir (0, -130%);
retardo de animación: -0,1 s;
}`

Paso 4: Integrar el cargador en su sitio web
Para utilizar el cargador en su proyecto web, asegúrese de incluir HTML y CSS en sus archivos. Coloque el marcado HTML del cargador en la ubicación deseada y el cargador aparecerá durante los procesos de carga.

Conclusión

Crear un cargador puede mejorar significativamente la experiencia del usuario de su sitio web. Con HTML y CSS simples, puede crear un cargador funcional y visualmente atractivo. ¡Experimente con colores y tamaños que se adapten al diseño de su sitio web!