Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Kemajuan Radial

Terakhir diperbarui:

Kemajuan radial CSS Tailwind khusus CSS — lingkaran kemajuan melingkar dengan tampilan persentase. Varian warna dan ukuran, tanpa JavaScript. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

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

<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

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

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

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>

Using Claude Code, Cursor, or another AI editor?

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

Coba Cherry MCP