Todo el mundo siempre tiene prisa y una página que tarda más de 2 o 3 segundos en cargar se ve como «demasiado lenta». Afortunadamente, hay una manera de evitar este pánico por un tiempo y mantener a los usuarios en el sitio el tiempo suficiente para que todo se cargue. Estoy hablando de la animación de carga perfectamente fascinante.
En esta publicación, veremos qué es exactamente una animación de carga, cuál es su propósito y cómo agregarla a cualquier sitio de WordPress, incluidos los sitios Divi.
¿Qué es la animación de carga?
La animación de carga, también llamada precargador, es una animación llamativa que aparece en el sitio web el tiempo suficiente para cargar todos los elementos. Algunas animaciones de carga son cortas y no necesitan mantener su atención por mucho tiempo. Pero en algunos casos, si el sitio es muy grande, la animación de carga debe ser realmente atractiva para que el usuario se demore.
Si ha existido durante el tiempo suficiente, sabrá que las animaciones de carga existen desde los años 90. Ya al comienzo de la era de Internet, teníamos animaciones cargando. Por supuesto, podrían haber durado mucho más que ahora. También aprendimos a hacerlos mucho más agradables para el usuario sin aburrirlos ni abandonarlos.
Familiarícese con la carga de animaciones
El estilo de carga de animación más popular es la rueda giratoria. No debe confundirse con el «círculo de la muerte del arco iris» de las computadoras Apple. La animación de carga del círculo giratorio tiene un movimiento de gradiente alterno. Los primeros precargadores rotativos tenían muchas versiones diferentes, desde flores, ruedas, copos de nieve e incluso giros ying yang. Actualmente, las animaciones de carga giratoria son más dinámicas y agradables a la vista.
Las animaciones de carga en remolino solo funcionan cuando los tiempos de espera son bajos. Más de 5 segundos es demasiado. Aquí es cuando los desarrolladores necesitan usar precargadores más creativos. Una animación de carga divertida y entretenida mantendrá al usuario en la página sin importar cuánto tiempo tarde.
Consejos para una mejor carga de animaciones
Hay algunas cosas que puede agregar a la animación de carga para que sea más interesante que solo una imagen en movimiento. Aquí hay algunos consejos para hacerlos aún mejores y más efectivos.
- Incluir la barra de porcentaje
- Mostrar cuánto tiempo más tiene que esperar el usuario
- Explique lo que sucede debajo del capó (accesorios para usar el humor)
- Use una animación divertida que no necesariamente repita exactamente la misma acción
Ventajas de la animación de carga de marca
Si tiene la opción de crear su propia animación de carga o usar un complemento con opciones de personalización, asegúrese de que el precargador tenga la marca. Esto puede ser tan simple como usar los colores del sitio web de la marca para usar la ilustración de la empresa. La idea detrás de cargar la marca de animación es que parezca que pertenece a ese sitio web y no es solo un complemento. Este resumen de Awwwards puede inspirar tus propias creaciones.
¿Cómo agregar una animación de carga a su sitio de WordPress?
Agregar una animación de carga es más fácil de lo que piensas. Hay muchas opciones para agregarlo a su sitio de WordPress. Desde complementos fáciles de usar hasta agregar código personalizado a su sitio web. Como hay tantas opciones diferentes, las enumeraré aquí para que pueda buscar y encontrar la mejor para usted.
Usar un complemento para agregar animaciones de carga
El complemento es la forma más fácil y sencilla de agregar una animación de carga. Son especialmente útiles si no se siente cómodo manipulando el código o no tiene tiempo. Aquí hay una lista de algunos de los complementos de carga de animación más completos. Algunos de ellos son gratuitos y otros son premium. En algunos casos, el mismo complemento tiene una versión gratuita más simple y una versión profesional más confiable.
Cargadora elevada
Loftloader tiene una versión gratuita y pro. En la versión gratuita, puedes probar algunos proloaders y adaptarlos a tu sitio y marca. La versión pro tiene más opciones y controles más detallados.
Módulo de precarga plana
Módulo de precarga plana es un complemento gratuito simple con un conjunto limitado de animaciones de carga coloridas. Este complemento es perfecto si necesita una reparación rápida del módulo de precarga y no necesita ajustar los colores o la imagen.
El mejor precargador
El mejor precargador es un complemento de animación de carga gratuito con una opción que se adapta a cualquier estilo de sitio. Tengo una animación con varios controles de personalización.
Cargador de página
Cargador de página es un complemento de animación de carga premium con muchas opciones de personalización y marca. Es uno de los complementos de precarga favoritos en el mercado.
Precargador inteligente WP
Precargador inteligente WP es un complemento gratuito de código abierto con opciones de personalización completas. Las animaciones no son muy extensas, pero se adaptan a cualquier estilo del sitio. Puede ajustar fácilmente los colores y la configuración.
Agregar animación de carga sin complemento
Si desea evitar el uso de un complemento, hay muchas animaciones de carga gratuitas y listas para usar disponibles. Además de algunos tutoriales avanzados que contienen los fragmentos de código que necesita agregar.
PixelBuda con multimedia:
Chicos multimedia publicó un tutorial simple con dos kits de animación de carga gratuita de PixelBuddha y el código necesario para configurarlos en su sitio web.
Pluma de código:
Este artículo promedio por UX Planet, el autor resumió muchas animaciones de carga en diferentes estilos. Son simples y más complejos. La mayoría de ellos están integrados con CodePen, y se puede descargar un fragmento de HTML y CSS desde el propio widget. Deberá insertarlos en el conjunto de códigos completo para configurar la animación de carga.
SpinKit:
Tobias Ashlink tiene un SpinKit con una buena colección de animaciones de carga con el código disponible a través de GitHub. También deben agregarse al conjunto de códigos completo para la configuración inicial.
Carga.io:
Loading.io es una colección de animaciones de carga con muchas opciones diferentes. Hay disponibles precargadores de CSS, precargadores de GIF, botones y más. Explore su sitio para ver todas las opciones e instrucciones sobre cómo agregarlos a su sitio.
Píxeles:
Los chicos son Pixelvars Escribí un práctico tutorial con todos los códigos que necesitas para configurar tu propia animación de carga. Incluso puede usar su código junto con las animaciones CodePen o GitHub anteriores. Para algunas personas, esta opción parece un poco más avanzada. Vaya con él si es un desarrollador con buenas habilidades de codificación.
Con tantas opciones, ¿elegirás?
Es fácil agregar una animación de carga a su sitio de WordPress. Con tantas opciones disponibles, solo necesita elegir una.
En esta publicación, le mostramos muchas formas diferentes de agregar animaciones de carga a su sitio web. ¿Cuál es tu método preferido? ¿Diseñado a medida y agregado con código a un tema secundario? Complemento configurable? ¿Una opción simple sin lujos? Háganos saber en los comentarios para que podamos ver sus propias animaciones de carga.
Imagen destacada vía muchomoros / shutterstock.com
