Todo el mundo siempre tiene prisa, y un sitio web que tarda más de 2 o 3 segundos en cargarse se percibe como «demasiado lento». Afortunadamente, hay una manera de evitar momentáneamente ese pánico y mantener a los usuarios en un sitio el tiempo suficiente para que se carguen las cosas. Estoy hablando de la animación de carga perfectamente hipnótica.
En esta publicación, veremos qué es exactamente una animación de carga, cuál es su propósito y cómo agregar una a cualquier sitio de WordPress, incluidos sus sitios Divi .
Una animación de carga, también llamada precargador, es una animación llamativa que aparece en un sitio web el tiempo suficiente para que se carguen todos los elementos. Algunas animaciones de carga son cortas y no necesitan mantener la atención del usuario por mucho tiempo. Pero en algunos casos, si el sitio es muy grande, la animación de carga debe ser realmente cautivadora para que el usuario se quede.
Si llevas el tiempo suficiente, sabrás que las animaciones de carga han estado apareciendo desde los años 90. Incluso al comienzo de la era de Internet, teníamos animaciones de carga. Por supuesto, en ese entonces, podrían durar mucho más que ahora. Además, hemos aprendido cómo hacerlos mucho más agradables para el usuario sin aburrirlos y navegar.
Familiarizarse con la carga de animaciones
El estilo más común de carga de animaciones es el círculo giratorio. 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 escalonado. Los primeros precargadores giratorios tenían muchas versiones diferentes, desde flores, círculos, copos de nieve e incluso ying yang giratorios. Hoy en día, las animaciones de carga giratoria son más dinámicas y agradables de ver.
Las animaciones de carga giratoria solo funcionan si el tiempo de espera es corto. Más de 5 segundos ya es demasiado. Ahí es cuando los desarrolladores necesitan usar cargadores previos más creativos. Una animación de carga divertida y entretenida mantendrá al usuario en el sitio sin importar cuánto tiempo tarde.
Consejos para cargar mejor las animaciones
Hay algunas cosas que puede agregar a su 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 una 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 entretenida que no necesariamente repita exactamente la misma acción.
Los beneficios de una animación de carga de marca
Si tiene la oportunidad 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 podría ser tan simple como usar los colores del sitio web de la marca o usar una ilustración de la empresa. La idea detrás de la marca de una animación de carga es que parezca que pertenece a ese sitio y no es solo un complemento. Este resumen en el sitio web de Awwwards puede inspirar sus 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 una serie de opciones sobre cómo agregar uno a un sitio de WordPress. Desde complementos fáciles de usar hasta agregar código personalizado al sitio. Como hay tantas opciones diferentes, las enumeraré aquí para que pueda echar un vistazo y encontrar cuál funciona mejor para usted.
Usando un complemento para agregar una animación de carga
Un complemento es la forma más fácil y directa de agregar una animación de carga. Estos son especialmente útiles si no se siente cómodo jugando con el código o no tiene tiempo. Aquí hay una lista de algunos de los complementos más versátiles para cargar animaciones. Algunos de estos 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 robusta.
Cargadora elevada
Loftloader tiene una versión gratuita y otra pro . En la versión gratuita, puede probar algunos de los proloaders y personalizarlos para que coincidan con el sitio y la marca. La versión pro tiene más opciones y controles más granulares.
Precargador Plano
Flat Preloader es un complemento gratuito simple con un conjunto limitado de animaciones de carga coloridas. Este complemento es perfecto si necesita una solución rápida para un precargador y no necesita personalizar los colores o la imagen.
Mejor precargador
Best Preloader es un complemento gratuito de animación de carga de una opción que se adapta a cualquier estilo de sitio web. Viene con una animación con algunos controles de personalización.
Cargador de página
Page Loader 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
WP Smart Preloader es un complemento gratuito y de código abierto con opciones de personalización completas. Las animaciones no son muy elaboradas pero encajarán con cualquier estilo de sitio web. Puede personalizar los colores y la configuración con bastante facilidad.
Agregar una animación de carga sin un 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 proporcionan los fragmentos de código que necesita agregar.
PixelBuda con Multimedia:
Los muchachos de Multimedia publicaron un tutorial simple con dos conjuntos gratuitos de animaciones de carga de PixelBuddha y el código que necesita para configurarlos en su sitio.
Pluma de código:
En este artículo de Medium de UX Planet, el autor resume muchas animaciones de carga en diferentes estilos. Los hay simples y otros más complejos. La mayoría de ellos están integrados desde CodePen y puede obtener el fragmento de HTML y CSS del propio widget. Deberá insertarlos en un conjunto de códigos completo para configurar una 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. Estos también deben agregarse a un conjunto de códigos completo para una configuración previa al préstamo.
Cargando.io:
Loading.io es una colección de animaciones de carga con muchas opciones diferentes. Hay precargadores de CSS, precargadores de GIF, botones y más. Mire a través de su sitio para encontrar todas las opciones y las instrucciones sobre cómo agregarlas a su sitio.
Pixelvars:
Los muchachos de Pixelvars escribieron un práctico tutorial con todo el código que necesitarás para configurar tu propia animación de carga. Incluso puede usar su código junto con las animaciones CodePen o GitHub anteriores. Esta opción parece un poco más avanzada para algunas personas. Vaya con esto si es un desarrollador con buenos conocimientos de codificación.
Con tantas opciones, ¿cuál elegirás?
Agregar una animación de carga a un sitio web de WordPress es fácil. Con tantas opciones diferentes disponibles, solo es cuestión de elegir una.
En esta publicación, le mostramos muchas formas diferentes de agregar una animación de carga a su sitio. ¿Cuál es tu método preferido? ¿Diseñado a medida y agregado con código a un tema secundario ? ¿Un complemento personalizable? ¿Una opción sencilla y sin lujos? Háganos saber en los comentarios para que podamos ver sus propias animaciones de carga.
Imagen destacada vía muchomoros / shutterstock.com