Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Bileşen Yükleniyor

Son güncelleme:

Döndürücü, noktalar, halka ve çubuk animasyonlarıyla yalnızca CSS'ye özgü Tailwind CSS yükleme göstergesi. Renk ve boyut çeşitleri, JavaScript gerekmez. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.

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
loadingTemelDönen halka göstergesi, varsayılan olarak metin rengini devralır
loading-dotsStilÜç yanıp sönen nokta
loading-barsStilÜç animasyonlu dikey çubuk
loading-xsBoyutEkstra küçük (1rem)
loading-smBoyutKüçük (1,25rem)
loading-mdBoyutOrta (1,5rem, varsayılan)
loading-lgBoyutBüyük (2rem)
loading-xlBoyutEkstra büyük (2,5rem)
loading-baseRenkSessiz taban yüzey rengi
loading-currentRenkGeçerli metin rengini açıkça devralır
loading-primaryRenkBirincil tema rengi
loading-secondaryRenkİkincil tema rengi
loading-accentRenkVurgu teması rengi
loading-neutralRenkNötr tema rengi
loading-infoRenkBilgi anlamsal rengi
loading-successRenkBaşarı anlamsal rengi
loading-warningRenkUyarı anlamsal rengi
loading-errorRenkHata anlamsal rengi

Temel Kullanım

<span class="loading"></span>

<span className="loading"></span>

<span class="loading"></span>

Stiller Yükleniyor

html 
1
2
3
<span class="loading"></span>
<span class="loading loading-dots"></span>
<span class="loading loading-bars"></span>

Yükleme Boyutları

html 
1
2
3
4
5
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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 
1
2
3
4
5
6
7
8
9
<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>

Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?

Cherry MCP, AI editörünüze talep üzerine tam Yükleniyor sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.

Cherry MCP'yi deneyin