Generador de skeleton loading (CSS)
Elige el modelo y los colores. El skeleton imita la forma del contenido que va a llegar, lo que hace que la espera parezca menor que con un ícono girando.
Cómo usarEsqueleto mientras carga la página
Disponible en: 
Generador de skeleton loading (CSS): para qué sirve
El skeleton screen es el esqueleto gris que aparece en lugar del contenido mientras se carga, como en Facebook y YouTube. Muestra la forma de lo que va a llegar, hace que la espera parezca menor y evita que la página salte cuando aparece el contenido.
Elige el modelo (tarjeta con imagen, lista con avatar, perfil o párrafo), cuántas veces repetir, los colores y las esquinas. El brillo animado mueve solo el fondo y se desactiva para quien pidió menos movimiento, y el bloque usa aria-busy con un texto de carga para lectores de pantalla.
Cómo usar
- Elige el modelo y cuántas veces repetir.
- Ajusta los colores, las esquinas y el brillo.
- Copia el código y reemplázalo por el contenido cuando llegue.
Cuándo usar
- Lista de productos cargada por API.
- Feed o lista de comentarios.
- Paneles y sistemas web.
Preguntas frecuentes
¿Por qué skeleton y no un ícono de cargando?
El esqueleto muestra la forma de lo que va a aparecer, así la página no salta cuando llega el contenido y la espera parece más corta. Funciona mejor para tarjetas, listas y perfiles; para acciones rápidas, como enviar un formulario, basta un indicador en el propio botón.
¿Cómo queda para quien usa lector de pantalla?
El bloque recibe aria-busy=true y un texto oculto "Cargando"; los rectángulos son decorativos (aria-hidden). Cuando llegue el contenido, reemplaza el esqueleto por el contenido y quita el aria-busy.
¿El brillo animado pesa?
No: la animación mueve solo el fondo de cada rectángulo. Para quien configuró el sistema para reducir el movimiento, el brillo se desactiva y queda solo el color.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.