Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Radial Progress Component

CSS-only Tailwind CSS radial progress — circular progress ring with percentage display. Color and size variants, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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-progressBasisIndikator kemajuan melingkar yang didorong oleh --radial-progress--value
radial-progress-xsUkuranSangat kecil
radial-progress-smUkuranKecil
radial-progress-mdUkuranSedang (standar)
radial-progress-lgUkuranBesar
radial-progress-xlUkuranEkstra besar
radial-progress-baseWarnaWarna permukaan dasar teredam
radial-progress-currentWarnaSecara eksplisit mewarisi warna teks saat ini
radial-progress-primaryWarnaWarna tema utama
radial-progress-secondaryWarnaWarna tema sekunder
radial-progress-accentWarnaWarna tema aksen
radial-progress-neutralWarnaWarna tema netral
radial-progress-infoWarnaInfo warna semantik
radial-progress-successWarnaWarna semantik sukses
radial-progress-warningWarnaWarna semantik peringatan
radial-progress-errorWarnaKesalahan warna semantik

Penggunaan Dasar

70%
<div class="radial-progress" style="--radial-progress--value:70">70%</div>

1
2
3
4
function RadialProgress() {
  const progress = {"--radial-progress--value": 70}
  return <div className="radial-progress" style={progress}>70%</div>
}

Ukuran Kemajuan Radial

70%
70%
70%
70%
70%
html 
1
2
3
4
5
<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

70%
70%
70%
70%
70%
70%
70%
70%
70%
html 
1
2
3
4
5
6
7
8
9
<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

85%

Tasks Completed

html 
1
2
3
4
5
6
<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>