Agregue una animación de carga a su sitio web de WordPress (10 opciones diferentes)


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 las cosas se carguen. 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.

¿Qué es una animación de carga?

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 has estado alrededor el tiempo suficiente, sabes 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 aquel entonces, podrían durar mucho más de lo que lo hacen ahora. Además, hemos aprendido cómo hacerlos mucho más agradables para el usuario sin aburrirlos y navegar lejos.

Familiarizarse con la carga de animaciones

El estilo más común de cargar 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 pre-cargadores giratorios tenían muchas versiones diferentes, desde flores, hasta círculos, copos de nieve e incluso ying yangs giratorios. Hoy en día, las animaciones de carga giratoria son más dinámicas y más 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. Es entonces cuando los desarrolladores necesitan usar más precargadores creativos. Una animación de carga divertida y entretenida mantendrá a un usuario en el sitio sin importar cuánto tiempo tome.

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
  • Muestra cuánto tiempo más tiene que esperar el usuario
  • Explicar lo que sucede debajo del capó (accesorios para usar el humor)
  • Use una animación entretenida que no necesariamente repita la misma acción exacta

Los beneficios de una animación de carga de marca

Si tiene la oportunidad de crear su propia animación de carga o utilizar 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 para usar realmente una ilustración de la compañía. La idea detrás de marcar una animación de carga es que parece 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 varias opciones sobre cómo agregar una a un sitio de WordPress. Desde complementos fáciles de usar hasta agregar código personalizado al sitio. Dado que hay muchas opciones diferentes, las enumeraré aquí para que pueda echar un vistazo y encontrar cuál funciona mejor para usted.

Uso de un complemento para agregar una animación de carga

Un complemento es la forma más sencilla 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 pro más robusta.

Loftloader

Loftloader tiene una versión gratuita y una versión pro. En la versión gratuita, puede probar algunos de los cargadores 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

Precargador plano 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

Mejor precargador es un complemento gratuito de animación de carga de una opción que se adapta a cualquier estilo de sitio web. Vengo con una animación con algunos 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 precargador favoritos en el mercado.

WP Smart Preloader

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 coincidirá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. Además de algunos tutoriales avanzados que proporcionan los fragmentos de código que necesita agregar.

PixelBuddha con Multimedia:

Los chicos de multimedia publicó un tutorial simple con dos conjuntos gratuitos de animaciones de carga de PixelBuddha y el código que necesita para configurarlos en su sitio.

CodePen:

Este artículo medio por UX Planet, el autor reúne muchas animaciones de carga en diferentes estilos. Hay simples y más complejos. La mayoría de ellos están incrustados desde CodePen y puede obtener el fragmento de HTML y CSS desde el widget en sí. 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 cargador.

Loading.io:

Loading.io es una colección de animaciones de carga con muchas opciones diferentes Hay precargadores CSS, precargadores 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 chicos son Pixelvars escribió un práctico tutorial con todo el código que necesitará para configurar su 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. Ve con esto si eres un desarrollador con buenos conocimientos de codificación.

Con tantas opciones, ¿por cuál irá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ño personalizado y agregado con código a un tema secundario? ¿Un complemento personalizable? ¿Una opción simple y sin lujos? Háganos saber en los comentarios para que podamos ver sus propias animaciones de carga.

Imagen destacada a través de muchomoros / shutterstock.com