Volver a Components

Skeleton

<sg-skeleton> v0.1.1

Placeholders animados para contenido en carga. Mejora la experiencia de usuario mostrando la estructura del contenido mientras se cargan los datos.

Ejemplos

Texto

example.html 
<sg-skeleton variant="text" width="200px" height="1rem"></sg-skeleton>
<sg-skeleton variant="text" width="150px" height="1rem"></sg-skeleton>
<sg-skeleton variant="text" width="180px" height="1rem"></sg-skeleton>

Rect谩ngulos

example.html 
<sg-skeleton variant="rect" width="120px" height="80px"></sg-skeleton>
<sg-skeleton variant="rect" width="160px" height="100px"></sg-skeleton>

C铆rculos (Avatares)

example.html 
<sg-skeleton variant="circle" width="40px" height="40px"></sg-skeleton>
<sg-skeleton variant="circle" width="56px" height="56px"></sg-skeleton>
<sg-skeleton variant="circle" width="72px" height="72px"></sg-skeleton>

Animaciones

Shimmer
Pulse
None
example.html 
<!-- Shimmer (default) -->
<sg-skeleton animation="shimmer" width="150px" height="60px"></sg-skeleton>

<!-- Pulse -->
<sg-skeleton animation="pulse" width="150px" height="60px"></sg-skeleton>

<!-- Sin animaci贸n -->
<sg-skeleton animation="none" width="150px" height="60px"></sg-skeleton>

Ejemplo: Card en carga

example.html 
<div class="hl-keyword">class="card-skeleton">
  <sg-skeleton variant="rect" width="100%" height="120px"></sg-skeleton>
  <sg-skeleton variant="text" width="80%"></sg-skeleton>
  <sg-skeleton variant="text" width="60%"></sg-skeleton>
</div>

Playground

Edita el c贸digo y ve los cambios en tiempo real:

HTML

API Reference

Propiedades

4
Prop Tipo Default Descripci贸n
variant 'text' | 'rect' | 'circle' 'text' Forma del skeleton
width string '100%' Ancho del elemento
height string '1rem' Alto del elemento
animation 'shimmer' | 'pulse' | 'none' 'shimmer' Tipo de animaci贸n de carga

C贸mo usar

Cu谩ndo usar

  • Carga de datos: Mientras se obtienen datos de una API
  • Im谩genes: Mientras se cargan im谩genes pesadas
  • Listas: Placeholder para items de lista
  • Cards: Estructura de tarjetas en carga

Mejores pr谩cticas

  • Usa dimensiones similares al contenido real
  • Mant茅n la estructura visual del layout final
  • Evita demasiados skeletons en una misma vista
  • Considera usar animation="none" si hay muchos elementos