Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Memuat Komponen

Terakhir diperbarui:

Indikator pemuatan CSS Tailwind khusus CSS dengan animasi spinner, titik, cincin, dan batang. Varian warna dan ukuran, tidak diperlukan JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Memuat yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP