Usa el Creador de Animaciones de Carga gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
Por qué los indicadores de carga todavÃa importan
Un indicador de carga es una promesa: algo está ocurriendo y la página no se ha quedado bloqueada. Sin él, una espera de dos segundos se siente como una página rota, y los usuarios pulsan de nuevo, actualizan o se van. Con él, la misma espera se siente como trabajo normal. El indicador no hace nada más rápido, pero cambia cómo se siente la espera, porque el usuario ve la prueba de que el sistema está vivo. La herramienta de arriba te permite crear un indicador que combine con tu sitio: elige una forma, un tamaño, una velocidad y un color, y copia el CSS.
Los indicadores convienen a esperas breves e inciertas: un formulario que se envÃa, un archivo que se sube, una búsqueda que se ejecuta. No convienen a esperas largas y medibles. Si sabes que una tarea está al 60 por ciento, muestra una barra de progreso con un porcentaje, no un indicador, porque el usuario merece información real. Si una tarea tarda más de unos diez segundos, añade un mensaje que explique qué está ocurriendo y qué puede hacer el usuario mientras tanto. Un indicador solo es un sustituto de la información, no un reemplazo de ella.
Cómo usar el creador
Elige primero una forma. El anillo con borde es el indicador clásico: un cÃrculo con un borde de color que gira. El anillo doble usa dos bordes de color y se siente más técnico. Los puntos que rebotan se sienten amables y convienen a interfaces de chat y redes sociales. Las barras que crecen se sienten como sonido o actividad y convienen a herramientas de medios. Cada forma usa los mismos controles, asà que puedes compararlas directamente y elegir la que encaje con el tono de tu sitio.
Luego ajusta el tamaño y la velocidad. El tamaño debe corresponder al contexto: un indicador pequeño, de unos 30 a 40 pÃxeles, conviene a botones y cargas en lÃnea. Un indicador mediano, de unos 60 a 90 pÃxeles, conviene a una zona de contenido. Un indicador grande, de más de 120 pÃxeles, conviene a una espera de página completa, pero úsalo rara vez, porque un indicador enorme domina la pantalla. La velocidad funciona igual: alrededor de un segundo por vuelta se siente tranquilo y normal. Más rápido que medio segundo se siente frenético, y más lento que dos segundos se siente atascado, incluso cuando el trabajo interno va bien.
Color y contraste
El color debe combinar con tu marca, pero también debe verse contra su fondo. Un indicador gris claro sobre una página blanca es casi invisible, lo que anula su propósito. Elige un color con contraste claro contra la página, y mantén la pista, la parte sin color del anillo, pálida pero visible, para que la rotación se lea con claridad. El selector de color de la herramienta actualiza la vista previa de inmediato, asà que puedes probar un color contra el fondo claro de la vista previa antes de publicarlo.
Indicadores, esqueletos y barras de progreso
Estos tres patrones de carga resuelven problemas distintos, y elegir el equivocado confunde a los usuarios. Un indicador dice que hay trabajo en curso pero no da detalles. Un esqueleto dice que viene contenido y muestra su forma, lo que es mejor cuando se conoce el diseño, como una lista o una cuadrÃcula de tarjetas. Una barra de progreso dice cuánto se ha hecho, lo que es mejor cuando el trabajo es medible, como una subida. Usa un indicador cuando la espera sea corta y la forma del resultado se desconozca. Usa un esqueleto cuando se conozca el diseño. Usa una barra de progreso cuando se conozca el porcentaje.
Accesibilidad para estados de carga
Un indicador es visual, asà que los usuarios de lectores de pantalla necesitan un equivalente en texto. Añade un mensaje oculto visualmente como Cargando, o una zona aria-live que anuncie cuándo empieza y termina la carga. Sin eso, un usuario de lector de pantalla puede no oÃr nada y suponer que la página está rota. Además, nunca dependas solo de un indicador para bloquear la interacción: desactiva el botón de envÃo mientras carga, para que los usuarios no puedan enviar dos veces, y restáuralo si la acción falla, con un mensaje de error claro.
Preguntas frecuentes
¿A qué velocidad debe girar un indicador? Alrededor de un segundo por vuelta se siente normal. Mucho más rápido se siente frenético, y mucho más lento se siente atascado. La herramienta te permite probar velocidades de 0,3 a 3 segundos.
¿Debe el indicador estar en un botón o en la página? Ambas opciones son válidas. Un indicador pequeño dentro de un botón muestra que la acción del botón se está ejecutando. Un indicador más grande en la zona de contenido muestra que la sección de la página está cargando. Ajusta el tamaño a la zona.
¿Puedo usar el CSS copiado directamente? SÃ. El código incluye la clase del indicador y los fotogramas clave de rotación. Añade una etiqueta de Cargando junto a él para los lectores de pantalla, y listo.
Crea un indicador arriba, ajústalo al color de tu marca y acompáñalo con un mensaje breve para esperas más largas. Un indicador tranquilo, usado con honestidad, mantiene pacientes a los usuarios.
Herramientas relacionadas
- Loading Spinner Maker (English version)
- Vista Previa de Efectos al Pasar el Ratón
- Vista Previa de Cargadores Esqueleto
Pingback: Loading Spinner Maker - Custom Loaders in Seconds