---
title: "Kemajuan"
type: component
version: "2.2.5"
doc_version: "2.7.22"
status: stable
date: 2026-07-13
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Kemajuan CSS Tailwind menggunakan elemen HTML asli. Isian animasi dengan berbagai ukuran dan warna untuk status pemuatan, penyelesaian tugas, dan indikator langkah."
url: https://frutjam.com/id/components/progress
---

# Komponen Kemajuan

Komponen kemajuan memvisualisasikan status penyelesaian tugas, unduhan, atau proses multi-langkah. Dibuat dengan elemen kemajuan HTML semantik dan gaya Tailwind CSS, bilah kemajuan mengomunikasikan kemajuan dengan jelas kepada pengguna. Sistem kemajuan Frutjam mendukung berbagai warna, ukuran, dan status animasi untuk integrasi fleksibel ke dalam layar pemuatan, formulir, dan dasbor.

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                |
| ------------------ | ----- | ------------------------- |
| progress           | Basis | Bilah kemajuan horizontal |
| progress-primary   | Warna | Warna tema utama          |
| progress-secondary | Warna | Warna tema sekunder       |
| progress-accent    | Warna | Warna tema aksen          |
| progress-neutral   | Warna | Warna tema netral         |
| progress-info      | Warna | Info warna semantik       |
| progress-success   | Warna | Warna semantik sukses     |
| progress-warning   | Warna | Warna semantik peringatan |
| progress-error     | Warna | Kesalahan warna semantik  |

## Varian warna

### Bawaan

### Utama

```html
<progress class="progress progress-primary w-56" value="0" max="100"></progress>
<progress class="progress progress-primary w-56" value="25" max="100"></progress>
<progress class="progress progress-primary w-56" value="50" max="100"></progress>
<progress class="progress progress-primary w-56" value="75" max="100"></progress>
<progress class="progress progress-primary w-56" value="100" max="100"></progress>
```

### Sekunder

```html
<progress class="progress progress-secondary w-56" value="0" max="100"></progress>
<progress class="progress progress-secondary w-56" value="25" max="100"></progress>
<progress class="progress progress-secondary w-56" value="50" max="100"></progress>
<progress class="progress progress-secondary w-56" value="75" max="100"></progress>
<progress class="progress progress-secondary w-56" value="100" max="100"></progress>
```

### Aksen

```html
<progress class="progress progress-accent w-56" value="0" max="100"></progress>
<progress class="progress progress-accent w-56" value="25" max="100"></progress>
<progress class="progress progress-accent w-56" value="50" max="100"></progress>
<progress class="progress progress-accent w-56" value="75" max="100"></progress>
<progress class="progress progress-accent w-56" value="100" max="100"></progress>
```

### Netral

```html
<progress class="progress progress-neutral w-56" value="0" max="100"></progress>
<progress class="progress progress-neutral w-56" value="25" max="100"></progress>
<progress class="progress progress-neutral w-56" value="50" max="100"></progress>
<progress class="progress progress-neutral w-56" value="75" max="100"></progress>
<progress class="progress progress-neutral w-56" value="100" max="100"></progress>
```

### Informasi

```html
<progress class="progress progress-info w-56" value="0" max="100"></progress>
<progress class="progress progress-info w-56" value="25" max="100"></progress>
<progress class="progress progress-info w-56" value="50" max="100"></progress>
<progress class="progress progress-info w-56" value="75" max="100"></progress>
<progress class="progress progress-info w-56" value="100" max="100"></progress>
```

### Kesuksesan

```html
<progress class="progress progress-success w-56" value="0" max="100"></progress>
<progress class="progress progress-success w-56" value="25" max="100"></progress>
<progress class="progress progress-success w-56" value="50" max="100"></progress>
<progress class="progress progress-success w-56" value="75" max="100"></progress>
<progress class="progress progress-success w-56" value="100" max="100"></progress>
```

### Peringatan

```html
<progress class="progress progress-warning w-56" value="0" max="100"></progress>
<progress class="progress progress-warning w-56" value="25" max="100"></progress>
<progress class="progress progress-warning w-56" value="50" max="100"></progress>
<progress class="progress progress-warning w-56" value="75" max="100"></progress>
<progress class="progress progress-warning w-56" value="100" max="100"></progress>
```

### Kesalahan

```html
<progress class="progress progress-error w-56" value="0" max="100"></progress>
<progress class="progress progress-error w-56" value="25" max="100"></progress>
<progress class="progress progress-error w-56" value="50" max="100"></progress>
<progress class="progress progress-error w-56" value="75" max="100"></progress>
<progress class="progress progress-error w-56" value="100" max="100"></progress>
```