---
title: "Loading"
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 Loading with spinner, dots, bars, and ring variants. Multiple sizes and colors for accessible async feedback indicators."
url: https://frutjam.com/tr/components/loading
---

# Loading Component

Yükleme bileşenleri, içerik getirilirken veya işlenirken görsel göstergeler görüntüleyerek kullanıcıları bilgilendirir ve algılanan gecikmeleri önler. Anlamsal HTML ve düzgün CSS animasyonları ile oluşturulan yükleme döndürücüler, aktif arka plan işlemlerini iletir. Frutjam yükleme sistemi birden çok stili, rengi ve boyutu destekler; veri tabloları, dosya yüklemeleri, form gönderimleri ve eşzamansız işlemler 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                                                            |
| ----------------- | ----- | ---------------------------------------------------------------- |
| loading           | Temel | Dönen halka göstergesi, varsayılan olarak metin rengini devralır |
| loading-dots      | Stil  | Üç yanıp sönen nokta                                             |
| loading-bars      | Stil  | Üç animasyonlu dikey çubuk                                       |
| loading-xs        | Boyut | Ekstra küçük (1rem)                                              |
| loading-sm        | Boyut | Küçük (1,25rem)                                                  |
| loading-md        | Boyut | Orta (1,5rem, varsayılan)                                        |
| loading-lg        | Boyut | Büyük (2rem)                                                     |
| loading-xl        | Boyut | Ekstra büyük (2,5rem)                                            |
| loading-base      | Renk  | Sessiz taban yüzey rengi                                         |
| loading-current   | Renk  | Geçerli metin rengini açıkça devralır                            |
| loading-primary   | Renk  | Birincil tema rengi                                              |
| loading-secondary | Renk  | İkincil tema rengi                                               |
| loading-accent    | Renk  | Vurgu teması rengi                                               |
| loading-neutral   | Renk  | Nötr tema rengi                                                  |
| loading-info      | Renk  | Bilgi anlamsal rengi                                             |
| loading-success   | Renk  | Başarı anlamsal rengi                                            |
| loading-warning   | Renk  | Uyarı anlamsal rengi                                             |
| loading-error     | Renk  | Hata anlamsal rengi                                              |

## Temel Kullanım

## Stiller Yükleniyor

```html
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>
```

## Yükleme Boyutları

```html
<span class="loading loading-xs"></span>
<span class="loading loading-sm"></span>
<span class="loading loading-md"></span>
<span class="loading loading-lg"></span>
<span class="loading loading-xl"></span>
```

## Renkler Yükleniyor

```html
<span class="loading loading-base"></span>
<span class="loading loading-primary"></span>
<span class="loading loading-secondary"></span>
<span class="loading loading-accent"></span>
<span class="loading loading-info"></span>
<span class="loading loading-success"></span>
<span class="loading loading-warning"></span>
<span class="loading loading-error"></span>
<span class="loading loading-neutral"></span>
```

## Geçerli Renk Yükleniyor

```html
<p class="text-primary flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits primary text color
</p>
<p class="text-error flex items-center gap-2">
  <span class="loading loading-sm"></span>
  Inherits error text color
</p>
```

## Düğmeye Yükleniyor

```html
<button class="btn gap-2">
  <span class="loading loading-sm"></span>
  Loading
</button>

<button class="btn btn-primary gap-2">
  <span class="loading loading-sm loading-current"></span>
  Processing
</button>

<button class="btn btn-error gap-2">
  <span class="loading loading-sm loading-current"></span>
  Deleting
</button>
```

## Yükleme Durumları

```html
<div class="card card-outline w-96">
  <div class="card-content">
    <h3 class="card-title">Loading Data</h3>
    <div class="flex items-center gap-2">
      <span class="loading loading-md"></span>
      <span>Fetching information...</span>
    </div>
  </div>
</div>
```