---
title: "Radial Progress"
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 Radial Progress for circular indicators. Custom sizes, stroke widths, and colors for dashboards, metrics, and performance displays."
url: https://frutjam.com/id/components/radial-progress
---

# Radial Progress Component

Komponen kemajuan radial menampilkan persentase penyelesaian dalam format melingkar, menawarkan alternatif elegan untuk bilah kemajuan linier. Dibangun dengan visualisasi berbasis SVG dan animasi CSS, kemajuan radial menambah daya tarik visual pada dasbor dan indikator status. Sistem kemajuan radial Frutjam mendukung berbagai ukuran dan warna—ideal untuk metrik, pelacakan penyelesaian, dan visualisasi data.

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                                                                 |
| ------------------------- | ------ | -------------------------------------------------------------------------- |
| radial-progress           | Basis  | Indikator kemajuan melingkar yang didorong oleh `--radial-progress--value` |
| radial-progress-xs        | Ukuran | Sangat kecil                                                               |
| radial-progress-sm        | Ukuran | Kecil                                                                      |
| radial-progress-md        | Ukuran | Sedang (standar)                                                           |
| radial-progress-lg        | Ukuran | Besar                                                                      |
| radial-progress-xl        | Ukuran | Ekstra besar                                                               |
| radial-progress-base      | Warna  | Warna permukaan dasar teredam                                              |
| radial-progress-current   | Warna  | Secara eksplisit mewarisi warna teks saat ini                              |
| radial-progress-primary   | Warna  | Warna tema utama                                                           |
| radial-progress-secondary | Warna  | Warna tema sekunder                                                        |
| radial-progress-accent    | Warna  | Warna tema aksen                                                           |
| radial-progress-neutral   | Warna  | Warna tema netral                                                          |
| radial-progress-info      | Warna  | Info warna semantik                                                        |
| radial-progress-success   | Warna  | Warna semantik sukses                                                      |
| radial-progress-warning   | Warna  | Warna semantik peringatan                                                  |
| radial-progress-error     | Warna  | Kesalahan warna semantik                                                   |

## Penggunaan Dasar

## Ukuran Kemajuan Radial

```html
<div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div>
```

## Warna Kemajuan Radial

```html
<div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div>
```

## Kemajuan Radial dengan Label

```html
<div class="flex flex-col items-center gap-4">
  <div class="text-center">
    <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div>
    <p class="text-sm mt-2">Tasks Completed</p>
  </div>
</div>
```