Przejdź do głównej treści
Frutjam logo Frutjam
v2.2.2
Theme

Komponent szkieletu

Ostatnia aktualizacja:

Moduł ładujący szkielet CSS Tailwind tylko dla CSS dla zastępczego interfejsu użytkownika. Kształty okręgów, prostokątów i linii tekstowych z animacją pulsacyjną. Dostępny WCAG AA, współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Komponenty szkieletu wyświetlają układy zastępcze podczas ładowania zawartości, zapewniając wizualne informacje zwrotne i poprawiając postrzeganą wydajność. Zbudowane z semantycznych animacji HTML i pulsacyjnych, szkieletowe ekrany zapobiegają zmianom układu i ustalają oczekiwania użytkowników. System szkieletowy Frutjam obsługuje wiele kształtów i rozmiarów — idealny do podglądu treści, stopniowego ładowania i płynnej degradacji.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

Klasa Typ Opis
skeletonOpieraćPulsing placeholder block
skeleton-circleStylCircular skeleton shape
skeleton-textStylShimmer animation applied to visible text

Podstawowe użycie

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

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

Skeleton Shapes

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>

Skeleton Card

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>

Skeleton List

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>

Skeleton Avatar

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

Karta profilu szkieletu

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>

Artykuł o szkielecie

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>

Tekst szkieletu

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

Używasz kodu Claude'a, kursora lub innego edytora AI?

Cherry MCP na żądanie udostępnia edytorowi AI dokładne nazwy i strukturę klas Szkielet. Żadnych więcej zajęć z halucynacjami.

Try Cherry MCP