Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Loading Component

CSS-only Tailwind CSS loading indicator with spinner, dots, ring, and bars animations. Color and size variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Komponen pemuatan menampilkan indikator visual saat konten diambil atau diproses, sehingga pengguna selalu mendapat informasi dan mencegah penundaan yang dirasakan. Dibangun dengan HTML semantik dan animasi CSS yang halus, pemintal pemuatan mengomunikasikan operasi latar belakang yang aktif. Sistem pemuatan Frutjam mendukung berbagai gaya, warna, dan ukuran—ideal untuk tabel data, unggahan file, pengiriman formulir, dan operasi asinkron.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
loadingBasisIndikator cincin berputar, mewarisi warna teks secara default
loading-dotsGayaTiga titik berdenyut
loading-barsGayaTiga bilah vertikal animasi
loading-xsUkuranEkstra kecil (1rem)
loading-smUkuranKecil (1,25rem)
loading-mdUkuranSedang (1,5rem, default)
loading-lgUkuranBesar (2rem)
loading-xlUkuranEkstra besar (2,5rem)
loading-baseWarnaWarna permukaan dasar teredam
loading-currentWarnaSecara eksplisit mewarisi warna teks saat ini
loading-primaryWarnaWarna tema utama
loading-secondaryWarnaWarna tema sekunder
loading-accentWarnaWarna tema aksen
loading-neutralWarnaWarna tema netral
loading-infoWarnaInfo warna semantik
loading-successWarnaWarna semantik sukses
loading-warningWarnaWarna semantik peringatan
loading-errorWarnaKesalahan warna semantik

Penggunaan Dasar

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

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

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

Memuat Gaya

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

Memuat Ukuran

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>

Memuat Warna

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>

Memuat Warna Saat Ini

Inherits primary text color

Inherits error text color

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>

Memuat di Tombol

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>

Memuat Negara

Loading Data

Fetching information...
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>