Yalnızca CSS'de Tailwind CSS radyal ilerlemesi — yüzde göstergeli dairesel ilerleme halkası. Renk ve boyut çeşitleri, JavaScript yok. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
Radyal ilerleme bileşenleri, tamamlanma yüzdesini dairesel bir formatta görüntüleyerek doğrusal ilerleme çubuklarına şık bir alternatif sunar. SVG tabanlı görselleştirme ve CSS animasyonlarıyla oluşturulan radyal ilerleme, kontrol panellerine ve durum göstergelerine görsel ilgi katar. Frutjam radyal ilerleme sistemi birden fazla boyutu ve rengi destekler; ölçümler, tamamlanma takibi ve veri görselleştirme için idealdir.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| radial-progress | Temel | --radial-progress--value tarafından yönlendirilen döngüsel ilerleme göstergesi |
| radial-progress-xs | Boyut | Ekstra küçük |
| radial-progress-sm | Boyut | Küçük |
| radial-progress-md | Boyut | Orta (varsayılan) |
| radial-progress-lg | Boyut | Büyük |
| radial-progress-xl | Boyut | Ekstra büyük |
| radial-progress-base | Renk | Sessiz taban yüzey rengi |
| radial-progress-current | Renk | Geçerli metin rengini açıkça devralır |
| radial-progress-primary | Renk | Birincil tema rengi |
| radial-progress-secondary | Renk | İkincil tema rengi |
| radial-progress-accent | Renk | Vurgu teması rengi |
| radial-progress-neutral | Renk | Nötr tema rengi |
| radial-progress-info | Renk | Bilgi anlamsal rengi |
| radial-progress-success | Renk | Başarı anlamsal rengi |
| radial-progress-warning | Renk | Uyarı anlamsal rengi |
| radial-progress-error | Renk | Hata anlamsal rengi |
Temel Kullanım
<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> } |
Radyal İlerleme Boyutları
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> |
Radyal İlerleme Renkleri
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> |
Etiketli Radyal İlerleme
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> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam Radyal İlerleme sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.