Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Skelettkomponente

Zuletzt aktualisiert:

Nur CSS-basierter Tailwind-CSS-Skelett-Loader für die Platzhalter-Benutzeroberfläche. Kreis-, Rechteck- und Textlinienformen mit Pulsanimation. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Skelettkomponenten zeigen beim Laden von Inhalten Platzhalterlayouts an, geben visuelles Feedback und verbessern die wahrgenommene Leistung. Mit semantischem HTML und Pulsanimationen erstellte Skelettbildschirme verhindern Layoutverschiebungen und wecken Benutzererwartungen. Das Frutjam-Skelettsystem unterstützt mehrere Formen und Größen – ideal für die Inhaltsvorschau, das progressive Laden und den eleganten Abbau.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
skeletonBasePulsierender Platzhalterblock
skeleton-circleStilKreisförmige Skelettform
skeleton-textStilAuf sichtbaren Text angewendete Schimmeranimation

Grundlegende Verwendung

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

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

Skelettformen

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>

Skelettkarte

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>

Skelettliste

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>

Skelett-Avatar

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

Skelett-Visitenkarte

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>

Skelettartikel

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>

Skeletttext

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

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Skeleton-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP