Cuando un visitante hace clic en un enlace o botón en su sitio, espera ver algunos comentarios. Pero si no pasa nada, la mayoría encontrará que algo anda mal. Desaparecerán rápidamente, antes de que sepan que su sitio está procesando su solicitud.
La animación de carga puede ayudar a prevenir este tipo de rechazo y brindar una experiencia de usuario (UX) mucho mejor al informar a las personas que su solicitud se recibió y se está procesando.
Si bien algunos creadores de sitios web o temas ofrecen funciones de animación integradas, puedes crear las tuyas usando CSS. En esta publicación, explicaremos cómo puede hacerlo utilizando conocimientos básicos de diseño web y le daremos algunos ejemplos que su equipo puede usar como inspiración.
¿Qué es la animación de carga?
Las animaciones de carga son notificaciones que aseguran a los usuarios que el sistema aún está atendiendo su solicitud. Cuando el usuario hace clic en el enlace o botón, la animación continúa hasta que se completa el proceso de carga.
Algunas animaciones tienen barras de progreso que indican cuánto tiempo llevará cargar datos o contenido. Esto brinda a los usuarios una actualización en tiempo real, o una distracción, que hace que la espera sea más llevadera.
Hay muchas herramientas diferentes que pueden crear animaciones de carga. Sin embargo, uno de los más prácticos es CSS. Echemos un vistazo a por qué en la siguiente sección.
CSS para cargar animaciones
Para que quede claro, puede usar otro lenguaje de codificación como JavaScript (JS) o un GIF animado simple para su cargador de arranque.
Sin embargo, CSS tiene algunos puntos fuertes que lo convierten en una solución práctica para este propósito:
- Es fácil de editar. Puede ajustar rápidamente la duración, el color, la velocidad y otros elementos de la animación.
- No pierde calidad cuando cambia de escala.
- Las animaciones son rápidas y fluidas gracias a la aceleración del procesador gráfico (GPU) (más rápida que JS).
- Es posible hacer una pausa con la propiedad animation-play-state.
Es posible que algunos navegadores, como Internet Explorer 9 y Opera Mini, no admitan las animaciones de carga de CSS. Si no está seguro de si es compatible, herramientas como Moderniza te puedo decir si lo son. Para los navegadores que no admiten animaciones de carga CSS, puede usar GIF en su lugar.
Ahora que hemos explicado cuándo debe usar CSS (y cuándo no), echemos un vistazo a algunas animaciones de carga que se han creado con este lenguaje de codificación.
Ejemplos de animación de carga de CSS
Hay muchas animaciones de carga diferentes que puede crear con CSS. Estos son los cinco tipos más comunes, con muchos ejemplos de cada uno.
1. Animación de carga infinita
Infinitas animaciones de carga piden al usuario que espere sin indicar la hora. Se pueden utilizar cuando el tiempo de espera es desconocido o muy corto.
Un ejemplo de una animación de carga infinita con código.
ver la pluma Crear onda de agua ♒ Efectos de animación CSS por Bilal.Rizwaan (@Bilal1909) en CódigoPen.
2. Especifique la animación de carga
Especifique las animaciones de carga que indican cuánto tiempo llevará cargar una página. Pueden ofrecer un cierto porcentaje o número, pero no tienen que hacerlo. También puede ser una estimación visual, como un círculo dibujado o un relleno de barra.
Especifique un ejemplo de carga de una animación con código
ver la pluma Reproducir cargador de relleno por Chris Gannon (@chrisgannon) en CódigoPen.
3. Barra de progreso
Las barras de progreso son un tipo específico de animación de carga específica. Son lineales en lugar de circulares y, a menudo, le dirán al usuario cuánto tiempo queda en porcentaje, volumen o fracción.
Un ejemplo de una barra de progreso con código
ver la pluma Progreso por Ychnightdera-ambos (@ chnightder-valiente) en CódigoPen.
4. Pantalla de esqueleto
Las pantallas de estructura metálica comienzan como una página en blanco con marcadores de posición para el contenido que verá. Los elementos se revelan gradualmente hasta que la página se carga por completo.
Ejemplo de pantalla de esqueleto con código
ver la pluma Demostración de pantalla de esqueleto por Joe (@hijiangtao) en CódigoPen.
5. Perilla de carga de CSS
Los botones de carga de CSS indican que la página se está cargando como una animación que se mueve en una ruta circular. La animación continuará en esta ruta circular hasta que se cargue la página.
Dado que estos son tipos comunes de animaciones de carga infinita, echemos un vistazo a algunos ejemplos a continuación.
Facilidad de carga Spinner
La propiedad de tiempo de animación de la perilla de carga a continuación está configurada en «salida fácil», lo que significa que tiene un comienzo lento y un final lento.
Spinner de carga del arco iris
El siguiente indicador de carga consta de un bloque principal y varios bloques secundarios. Cada div tiene un estilo con diferentes propiedades CSS, por lo que tienen diferentes colores y tamaños, y comienzan la secuencia de animación en diferentes momentos.
Cargando un spinner con texto animado
La perilla de carga a continuación está animada para girar a una velocidad de dos segundos, infinitamente. También contiene un div con la palabra «Cargando» que también está animado para volverse completamente transparente y completamente opaco a medida que gira el cargador.
Perilla de carga SVG
La perilla de carga a continuación es un círculo SVG que consta de tres «guiones» que comienzan con puntos y luego se ensanchan para formar un círculo. La animación se repite sin cesar.
Dial de carga de gradiente
Lo que hace que el dial de carga a continuación sea especial es su color de fondo degradado. También incluye elementos de intervalo que tienen sus propios colores de fondo degradados.
Ejemplo de carga de un spinner con código
ver la pluma Animación de iluminación del anillo cargador. por Ekta Maurya (@curlmuhi) en CódigoPen.
Ahora que hemos visto algunos ejemplos, aprendamos cómo puede aplicarlos en la sección a continuación.
Cómo hacer una animación de carga CSS simple
Es fácil crear una animación de carga CSS simple. Veamos cómo hacer el siguiente spinner de carga.
ver la pluma de Christina Perricone (@hubspot) en CódigoPen.
Primero, agregue un div en HTML y defínalo con el nombre de clase «cargador».
<div class="loader"></div>
Luego usa el selector de clase CSS .cargador para personalizar la animación de carga de CSS. Puede definir varias propiedades como se muestra en el conjunto de reglas a continuación.
.loader {
margin: auto;
border: 20px solid #EAF0F6;
border-radius: 50%;
border-top: 20px solid #FF7A59;
width: 200px;
height: 200px;
animation: spinner 4s linear infinite;
}
@keyframes spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Vamos a explicar a continuación cómo funciona cada propiedad.
La propiedad de margen CSS se establece en «auto» para centrar el cargador en la página.
La propiedad de borde CSS define el tamaño, el estilo y el color del borde del cargador (que aparece como una ruta circular alrededor de la cual se mueve la «cinta» naranja).
Una propiedad CSS border-radius establecida en 50 % hace que el cargador forme un círculo.
La propiedad border-top define el tamaño, el estilo y el color del propio cargador (la «cinta» naranja). Tenga en cuenta que tiene el mismo tamaño y estilo que el borde; solo el color es diferente. También puede definir las propiedades border-bottom, border-right y border-left. Establecer la propiedad de borde inferior agregará una «cinta» giratoria separada. Establecer las propiedades de borde derecho o izquierdo extenderá una cinta.
Las propiedades de ancho y alto definen el tamaño de la animación de carga (un círculo completo).
Finalmente, la propiedad de animación define el nombre, la duración, el tiempo y la cuenta de iteración. En este ejemplo, la ruleta está configurada para funcionar a la misma velocidad de principio a fin durante 4 segundos y en bucle sin fin.
Lo único que hay que hacer es configurar los fotogramas clave de la animación. Describen cómo debe renderizarse el cargador en cualquier momento dado durante la secuencia de animación. Asegúrese de usar el nombre de la animación definida en la propiedad de animación (en este caso, «spinner»).
En este ejemplo, solo se definen dos fotogramas clave. El primero ocurre en el 0% o en el primer punto de la secuencia de animación. El cargador está configurado para girar 0 grados. El segundo fotograma clave está presente al 100 % (es decir, en el último punto de la secuencia de animación). El cargador está configurado para girar 360 grados, de modo que la «cinta» comienza en la parte superior de la rueda y completa una rotación completa en cuatro segundos.
Y eso es todo. Recuerde, sin embargo, que la animación de carga de CSS no tiene por qué ser tan simple. Como todas las cosas con CSS, tu imaginación controla las posibilidades.
Vea algunos de los mejores ejemplos en 24 ejemplos de animación CSS creativos y únicos para inspirarse.
Mejores prácticas para cargar animaciones CSS
La animación de carga debe pensarse cuidadosamente en términos de cómo podría afectar la experiencia del usuario. Por lo tanto, considere los siguientes consejos para crear una animación de carga de CSS efectiva.
1. Las mejores animaciones de carga tardan menos tiempo.
No importa cuán linda pueda verse la animación de tu gato girando, los usuarios se impacientan si continúa por mucho tiempo. Tenga en cuenta las expectativas de sus usuarios y asegúrese de que la animación tome el menor tiempo posible. Los usuarios apreciarán los tiempos de carga rápidos más que una hermosa ruleta.
2. Alivia el dolor de la espera.
Si le proporciona al usuario algo interesante para ver, la espera será menos agotadora. La animación inmersiva atraerá la atención y mantendrá ocupado al usuario.
3. Tu animación es parte de tu marca.
Si bien este no es el lugar para una campaña de marketing, es importante que el cargador sea compatible con la marca. Utilice la gama de colores y el tono de voz de su empresa para mantener la coherencia con su marca.
4. Informar al usuario sobre el motivo de la espera.
No siempre es obvio por qué el usuario tiene que esperar, y decírselo puede reducir la fricción mientras espera. No tiene que ser demasiado específico, en su lugar, las declaraciones simples como «espere mientras configuramos» o «espere un momento mientras descargamos el documento recién creado» funcionan bien.
5. Proporcione una estimación del tiempo de espera.
El tiempo estimado determina las expectativas y ayuda a los usuarios a esperar pacientemente. Puede mostrar esta estimación como un porcentaje o como una representación visual de su progreso.
Agregue una animación de carga CSS a su sitio web
La animación de carga de CSS ayuda a los usuarios a ser pacientes con su herramienta o sitio. Les advierte que el sistema no se ha bloqueado, les permite saber cuánto tiempo llevará cargar una página y los mantiene enfocados al proporcionarles algo para mirar. ¿La mejor parte? Crear una animación de carga con algunos conocimientos básicos de diseño web es fácil.
Nota del editor: esta publicación se publicó originalmente en febrero de 2020 y se actualizó para que esté completa.
{{slideInCta (‘be00be7b-acfc-4948-9055-bf6bf9746111’)}
