---
title: "Skeleton"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Skeleton with animated placeholders. Text, avatar, card, and image shapes for smooth perceived performance and loading states."
url: https://frutjam.com/tr/components/skeleton
---

# Skeleton Component

İskelet bileşenleri, içerik yüklenirken yer tutucu düzenleri görüntüleyerek görsel geri bildirim sağlar ve algılanan performansı artırır. Anlamsal HTML ve darbeli animasyonlarla oluşturulan iskelet ekranlar, düzen değişikliklerini önler ve kullanıcı beklentilerini belirler. Frutjam iskelet sistemi birden fazla şekil ve boyutu destekler; içerik önizlemesi, aşamalı yükleme ve zarif bozulma için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf           | Tip   | Tanım                                      |
| --------------- | ----- | ------------------------------------------ |
| skeleton        | Temel | Darbeli yer tutucu blok                    |
| skeleton-circle | Stil  | Dairesel iskelet şekli                     |
| skeleton-text   | Stil  | Görünür metne ışıltılı animasyon uygulandı |

## Temel Kullanım

## İskelet Şekilleri

```html
<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>
```

## İskelet Kartı

```html
<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>
```

## İskelet Listesi

```html
<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>
```

## İskelet Avatarı

```html
<div class="avatar">
  <div class="skeleton skeleton-circle h-12 w-12"></div>
</div>
```

## İskelet Profil Kartı

```html
<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>
```

## İskelet Makalesi

```html
<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>
```

## İskelet Metni

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