Respuesta corta: una animación de carga le dice a la gente que tu web está trabajando en su petición. No enseñes nada en esperas de menos de un segundo. Usa un spinner o una pantalla esqueleto hasta unos 10 segundos, y una barra de progreso en esperas más largas o en subidas. Cuenta lo mismo a los lectores de pantalla en un mensaje de estado y avisa cuando termine la espera.
Para qué sirve una animación de carga
NN/g, el grupo de investigación en usabilidad, dice que los indicadores de progreso tranquilizan a la gente porque ven que el sistema trabaja, y reducen su incertidumbre. También le dan algo que mirar, y eso hace la espera más llevadera.
Sus límites de tiempo de respuesta ayudan a decidir cuándo enseñarlo. Unos 0.1 segundos se sienten instantáneos, alrededor de 1 segundo mantiene el hilo del pensamiento y unos 10 segundos son el límite para mantener la atención en la tarea.
En cuanto alguien hace clic, la página debe enseñar que recibió la petición, por ejemplo con un botón que se ve pulsado.
Spinner, pantalla esqueleto o barra de progreso
| Indicador | Para qué | Espera |
|---|---|---|
| Ninguno | Respuestas rápidas: enseña el resultado | Menos de 1 segundo |
| Spinner (una animación en bucle) | Una parte de la página, como una tarjeta o un video | De 2 a 10 segundos |
| Pantalla esqueleto | Una página entera que carga, con bloques grises en su estructura | De 1 a 10 segundos |
| Barra de progreso (porcentaje hecho) | Subidas, descargas y otros procesos largos | 10 segundos o más |
| Esqueleto solo con el marco (cabecera y pie) | No se recomienda: una pantalla casi en blanco parece rota | Cualquier espera |
De los artículos de NN/g sobre pantallas esqueleto, indicadores de progreso y tiempos de respuesta, en inglés, consultados el 4 de noviembre de 2026.
Cuándo enseñarla y qué decir
Por debajo de un segundo, no pongas indicador. NN/g dice que ahí los spinners y las pantallas esqueleto no hacen falta, y un destello rápido puede hacer sentir que no se puede seguir el ritmo.
Entre 2 y 10 segundos funcionan un spinner o una pantalla esqueleto. Un texto corto también ayuda, como «Cargando comentarios…», para que la gente sepa por qué espera.
A partir de 10 segundos, enseña cuánto lleva hecho y cuánto falta, más o menos. En las tareas largas, da una forma de parar.
NN/g desaconseja un «Cargando…» estático que nunca se mueve, y también los avisos de no hacer clic dos veces. Enseña en su lugar que el primer clic se recibió. Una pantalla esqueleto no sustituye el trabajo de velocidad, como los cambios de imágenes de nuestra guía de carga diferida de imágenes.
Que los lectores de pantalla entiendan la espera
Las WCAG cuentan el estado de espera de una página y el progreso de un proceso como mensajes de estado. Los lectores de pantalla deben recibirlos sin que se mueva el foco. En el ejemplo del W3C, aparece un icono de ocupado cuando alguien inicia un proceso y el lector de pantalla anuncia «aplicación ocupada».
MDN describe el rol status como una región viva para información de aviso, que por defecto no interrumpe (polite), y ahí va tu texto «Cargando…». Mientras una zona carga, ponle aria-busy="true" y después vuelve a dejarlo en false, para que los lectores de pantalla esperen al contenido terminado. Nuestra guía de aria-live muestra cómo anunciar un cambio sin mover el foco.
Cuando la espera acabe, dilo. Si un mensaje de ocupado desaparece sin nada en su lugar, quien no ve la pantalla no se entera, y el W3C sugiere un mensaje de estado como «sistema disponible».
Una barra de progreso también necesita un nombre. MDN señala que un elemento <progress> sin valor es indeterminado y que en la mayoría de los casos necesita una etiqueta accesible. Nuestra guía de aria-label explica cómo nombrarla.
Movimiento y esperas largas
Las WCAG piden una forma de pausar, detener u ocultar el contenido en movimiento que empieza solo, dura más de cinco segundos y va junto a otro contenido. Una animación de precarga puede quedar fuera de esa regla cuando no se puede hacer nada durante ella y ocultar el progreso haría pensar que la página se ha colgado.
NN/g también advierte que las pantallas esqueleto animadas, con un pulso o un brillo, pueden distraer a algunas personas o crear problemas de accesibilidad. Nuestra guía de animaciones web explica el movimiento reducido y los controles de pausa.
Cómo añadir un estado de carga
- Mide cuánto dura la espera de verdad, también en un teléfono.
- Por debajo de un segundo, enseña el resultado y no pongas indicador.
- De 2 a 10 segundos, usa un spinner en la parte que carga, o una pantalla esqueleto para una página entera.
- De 10 segundos en adelante, enseña el progreso, una estimación y una forma de parar.
- Añade un texto corto que diga qué está cargando.
- Pon ese texto en un mensaje de estado y marca la zona que carga como ocupada.
- Avisa cuando termine y deja que el movimiento reducido pare la animación.
Cómo maneja la espera nuestro formulario de contacto
Nuestro formulario de contacto es la vía principal para escribirnos. El 4 de noviembre de 2026 probamos cómo maneja la espera, en inglés y en español, en una computadora y en un teléfono. Un navegador de pruebas retuvo nuestro mensaje y nunca lo dejó salir.
El botón de enviar se marca como ocupado en cuanto se pulsa, así que un segundo clic no puede mandar el mensaje dos veces. Si no llega respuesta en 0.3 segundos, nuestro indicador aparece en el lugar del texto del botón, con el mismo ancho, y los lectores de pantalla oyen «Enviando…».
Cuando la respuesta volvió en 0.1 segundos, no apareció nada: ni indicador ni mensaje. Cuando volvió en 0.4 segundos, el indicador se quedó 0.36 segundos en vez de parpadear, porque una vez que aparece espera al menos 0.35 segundos.
Cuando el mensaje llega, el formulario deja paso a una confirmación que los lectores de pantalla anuncian como mensaje de estado. Con el movimiento reducido activado, el indicador se queda quieto: en 15 muestras enseñó un solo dibujo, frente a 9 o 10 distintos con el movimiento activado.
Antes de publicar
- Las respuestas rápidas enseñan el resultado sin indicador.
- Las esperas de 2 a 10 segundos enseñan un spinner o una pantalla esqueleto.
- Las esperas de 10 segundos o más enseñan el progreso y una forma de parar.
- Un texto corto dice qué está cargando.
- Los lectores de pantalla oyen cuándo empieza la espera y cuándo acaba.
- La animación se queda quieta con el movimiento reducido activado.
RecuerdaUn indicador de carga es una promesa de que algo está pasando. Enséñalo solo cuando la espera es real, di qué está cargando y avisa a todos cuando termine.
Los formularios y las páginas que responden con claridad son parte de nuestro servicio de diseño web.
Respuestas rápidas sobre las animaciones de carga
¿Qué es una animación de carga?
Una señal visual de que tu web está trabajando en una petición, como un spinner, una pantalla esqueleto o una barra de progreso. NN/g explica que los indicadores de progreso tranquilizan a la persona y le dan algo que mirar mientras espera.
¿Uso un spinner o una pantalla esqueleto?
Para esperas de menos de 10 segundos sirven los dos. Según NN/g, el spinner va mejor en un solo bloque, como una tarjeta o un video, y la pantalla esqueleto cuando carga la página entera, porque enseña su estructura. Pasados 10 segundos, usa una barra de progreso.
¿Hace falta un indicador si la página carga rápido?
No. Si una página carga en menos de un segundo, NN/g dice que los spinners y las pantallas esqueleto no hacen falta. Un destello rápido puede hacer sentir que no se puede seguir el ritmo. Retrasa el indicador para que solo aparezca cuando la espera es real.
¿Cómo saben los lectores de pantalla que algo está cargando?
Pon un texto corto como «Cargando…» en un mensaje de estado, que los lectores de pantalla anuncian sin mover el foco. Marca la zona que se actualiza con aria-busy hasta que termine y después di que terminó, como sugiere el W3C.
¿Las animaciones de carga necesitan un botón de pausa?
Las WCAG piden una forma de pausar el contenido en movimiento que empieza solo, dura más de cinco segundos y va junto a otro contenido. El W3C deja fuera una animación de precarga si mientras tanto no se puede hacer nada más y ocultar el progreso haría pensar que la página se ha colgado.
Fuentes
Consultadas el 4 de noviembre de 2026. MDN Web Docs: <progress>: Elemento indicador de progreso. En inglés, Iniciativa de Accesibilidad Web del W3C: Understanding SC 4.1.3 Status Messages (Level AA) y Understanding SC 2.2.2 Pause, Stop, Hide (Level A); MDN Web Docs: ARIA: aria-busy attribute, ARIA: status role y <progress> HTML progress indicator element; Nielsen Norman Group: Skeleton Screens 101, Progress Indicators Make a Slow System Less Insufferable y Response Times: The 3 Important Limits. Nuestro caso: nuestro formulario de contacto, probado en un navegador el 4 de noviembre de 2026.