Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente esqueleto

Última actualización:

Cargador de esqueleto CSS Tailwind solo CSS para interfaz de usuario de marcador de posición. Formas de círculos, rectángulos y líneas de texto con animación de pulso. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes esqueléticos muestran diseños de marcadores de posición mientras se carga el contenido, lo que proporciona retroalimentación visual y mejora el rendimiento percibido. Construidas con HTML semántico y animaciones de pulsos, las pantallas esqueléticas evitan cambios de diseño y establecen las expectativas del usuario. El sistema de esqueleto de Frutjam admite múltiples formas y tamaños, ideal para vista previa de contenido, carga progresiva y degradación elegante.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
skeletonBaseBloque de marcador de posición pulsante
skeleton-circleEstiloForma de esqueleto circular
skeleton-textEstiloAnimación brillante aplicada al texto visible.

Uso básico

<div class="skeleton h-32 w-32"></div>

<div className="skeleton h-32 w-32"></div>

Formas de esqueleto

html 
1
2
3
4
5
6
7
<div class="skeleton skeleton-circle h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-12 w-12"></div>

<div class="skeleton h-4 w-12"></div>

Tarjeta de esqueleto

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div class="card card-outline w-96">
  <figure class="skeleton h-64"></figure>
  <div class="card-content">
    <h2 class="skeleton h-4 w-28"></h2>
    <p class="skeleton h-3 w-full"></p>
    <p class="skeleton h-3 w-full"></p>
    <div class="card-actions justify-end">
      <div class="skeleton h-8 w-24"></div>
    </div>
  </div>
</div>

Lista de esqueletos

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div class="space-y-2">
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
  <div class="flex items-center gap-3">
    <div class="skeleton h-10 w-10 rounded-full shrink-0"></div>
    <div class="flex flex-col gap-2 flex-1">
      <div class="skeleton h-3 w-20"></div>
      <div class="skeleton h-3 w-full"></div>
    </div>
  </div>
</div>

avatar esqueleto

html 
1
2
3
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>

Tarjeta de perfil de esqueleto

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div class="flex w-52 flex-col gap-4">
  <div class="flex items-center gap-4">
    <div class="skeleton h-16 w-16 shrink-0 rounded-full"></div>
    <div class="flex flex-col gap-4">
      <div class="skeleton h-4 w-20"></div>
      <div class="skeleton h-4 w-28"></div>
    </div>
  </div>
  <div class="skeleton h-32 w-full"></div>
</div>

Artículo de esqueleto

html 
1
2
3
4
5
6
<div class="flex w-52 flex-col gap-4">
  <div class="skeleton h-32 w-full"></div>
  <div class="skeleton h-4 w-28"></div>
  <div class="skeleton h-4 w-full"></div>
  <div class="skeleton h-4 w-full"></div>
</div>

Texto esqueleto

html 
<span class="skeleton skeleton-text">AI is thinking...</span>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Esqueleto según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP