Skeleton Generator
Crea pantallas de carga skeleton CSS con animaciones shimmer y pulse. Elige un preset y copia HTML + CSS.
① Elige un preset de diseño ② Elige animación y colores ③ Copia el CSS y el HTML
#2A2A2A
#3A3A3A
/* CSS */
.sk-bone {
background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
background-size: 200% 100%; animation: sk-shimmer 1.5s infinite;
border-radius: 4px;
}
.sk-img { width: 100%; height: 180px; border-radius: 8px; margin-bottom: 16px; }
.sk-line { height: 14px; margin-bottom: 10px; }
.sk-content { padding: 4px 0; }
.sk-card { max-width: 320px; }
.sk-list { display: flex; flex-direction: column; gap: 16px; }
.sk-list-item { display: flex; align-items: center; gap: 12px; }
.sk-avatar { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.sk-lines { flex: 1; }
.sk-article { max-width: 560px; }
.sk-profile { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 240px; }
.sk-circle { width: 72px; height: 72px; border-radius: 50%; }
.sk-profile-info { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
@keyframes sk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
@keyframes sk-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
/* HTML */
<div class="sk-card">
<div class="sk-img sk-bone"></div>
<div class="sk-content">
<div class="sk-line sk-bone" style="width:60%"></div>
<div class="sk-line sk-bone" style="width:90%"></div>
<div class="sk-line sk-bone" style="width:75%"></div>
</div>
</div>¿Qué son las pantallas skeleton y por qué usarlas?
Las pantallas skeleton son marcadores de posición de UI que imitan la estructura del contenido mientras se carga. Mejoran significativamente el rendimiento percibido. La animación shimmer aplica un gradiente móvil via background-position. Pulse usa una animación de opacity para crear un efecto de respiración. La técnica clave es una clase .sk-bone combinada con border-radius.
Preguntas frecuentes
Una pantalla skeleton es un marcador de posición de UI que replica el diseño del contenido real antes de que se cargue, usando formas simplificadas en colores apagados.
El efecto shimmer aplica un gradiente lineal y anima background-position de -200% a 200% horizontalmente, creando la ilusión de luz barriendo el elemento.
Shimmer es más sofisticado y comunica carga activa. Pulse es más simple y funciona mejor con diseños complejos o temas oscuros.
Copia la estructura HTML generada y reemplaza cada div .sk-bone con tus elementos de contenido reales.
El enfoque estándar es renderizar condicionalmente el skeleton o el contenido real en función de una variable de estado de carga.
Sí. Aplica sk-shimmer o sk-pulse selectivamente a huesos específicos para variedad visual.
Sí, son especialmente efectivos en móvil donde la latencia de red es mayor.