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-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
<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
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
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
Tasks Completed
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.