---
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/id/components/loading
---

# Loading Component

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                                                    |
| ----------------- | ------ | ------------------------------------------------------------- |
| loading           | Basis  | Indikator cincin berputar, mewarisi warna teks secara default |
| loading-dots      | Gaya   | Tiga titik berdenyut                                          |
| loading-bars      | Gaya   | Tiga bilah vertikal animasi                                   |
| loading-xs        | Ukuran | Ekstra kecil (1rem)                                           |
| loading-sm        | Ukuran | Kecil (1,25rem)                                               |
| loading-md        | Ukuran | Sedang (1,5rem, default)                                      |
| loading-lg        | Ukuran | Besar (2rem)                                                  |
| loading-xl        | Ukuran | Ekstra besar (2,5rem)                                         |
| loading-base      | Warna  | Warna permukaan dasar teredam                                 |
| loading-current   | Warna  | Secara eksplisit mewarisi warna teks saat ini                 |
| loading-primary   | Warna  | Warna tema utama                                              |
| loading-secondary | Warna  | Warna tema sekunder                                           |
| loading-accent    | Warna  | Warna tema aksen                                              |
| loading-neutral   | Warna  | Warna tema netral                                             |
| loading-info      | Warna  | Info warna semantik                                           |
| loading-success   | Warna  | Warna semantik sukses                                         |
| loading-warning   | Warna  | Warna semantik peringatan                                     |
| loading-error     | Warna  | Kesalahan warna semantik                                      |

## Penggunaan Dasar

## Memuat Gaya

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

## Memuat Ukuran

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

## Memuat Warna

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

## Memuat Warna Saat Ini

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

## Memuat di Tombol

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

## Memuat Negara

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