Content Placeholder
Paquete: @tiendana/web-foundation
Esqueletos con efecto shimmer para mostrar mientras el contenido real carga. Mejoran la percepción de velocidad porque reservan el espacio y la forma de lo que va a aparecer.
Características
✅ 8 formas - Texto, input, botón, avatar, tarjeta, toggle y más
✅ Animación continua - Degradado que recorre el bloque en 2 segundos
✅ Dark mode - Cambia de gris al activar .scheme-dark
✅ Solo CSS - Sin JavaScript ni dependencias
Demo
Cargando demo...
Ver código
Formas
Cada modificador fija el tamaño y el radio de la forma. Sin modificador, .content-placeholder solo aporta la animación y el degradado: el tamaño lo defines tú.
Cargando demo...
Ver código
| Clase | Tamaño | Radio |
|---|---|---|
.content-placeholder--text | Alto --spacing-md (16px), ancho 100% | --border-radius-md |
.content-placeholder--text-sm | Alto 14px, ancho 100% | --border-radius-md |
.content-placeholder--text-lg | Alto --spacing-lg (24px), ancho 100% | --border-radius-lg |
.content-placeholder--input | Alto --spacing-2xl (48px), ancho 100% | --border-radius-lg |
.content-placeholder--button | Alto --spacing-2xl, ancho 120px | --border-radius-lg |
.content-placeholder--avatar | --spacing-2xl por --spacing-2xl | --border-radius-full |
.content-placeholder--card | Alto 200px, ancho 100% | --border-radius-lg |
.content-placeholder--slide-toggle | 36px por --spacing-md | --border-radius-md |
Otras clases
| Clase | Descripción |
|---|---|
.content-placeholder-container | Contenedor flex de ancho completo con overflow: hidden para agrupar esqueletos |
.content-placeholder-checkbox-space | Cuadro de 20px con el mismo shimmer, aplicado en un ::before, para reservar el lugar de un checkbox |
Dark mode
Con la clase .scheme-dark en un ancestro, el degradado usa --color-gray-500 y --color-gray-400 en lugar de --color-gray-100 y --color-gray-200.
Accesibilidad
- Los esqueletos no tienen contenido: marca el contenedor que se está cargando con
aria-busy="true"y anuncia cuando termine la carga. - Con
prefers-reduced-motion: reduce, el reset global de web-foundation reduce la animación a una sola iteración de 0.01ms, así que el shimmer deja de moverse.
Ver También
- Select - La fila de carga de la paginación remota usa
.content-placeholder