Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Radyal İlerleme Bileşeni

Son güncelleme:

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-progressTemel--radial-progress--value tarafından yönlendirilen döngüsel ilerleme göstergesi
radial-progress-xsBoyutEkstra küçük
radial-progress-smBoyutKüçük
radial-progress-mdBoyutOrta (varsayılan)
radial-progress-lgBoyutBüyük
radial-progress-xlBoyutEkstra büyük
radial-progress-baseRenkSessiz taban yüzey rengi
radial-progress-currentRenkGeçerli metin rengini açıkça devralır
radial-progress-primaryRenkBirincil tema rengi
radial-progress-secondaryRenkİkincil tema rengi
radial-progress-accentRenkVurgu teması rengi
radial-progress-neutralRenkNötr tema rengi
radial-progress-infoRenkBilgi anlamsal rengi
radial-progress-successRenkBaşarı anlamsal rengi
radial-progress-warningRenkUyarı anlamsal rengi
radial-progress-errorRenkHata 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ı

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>

Radyal İlerleme Renkleri

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>

Etiketli Radyal İlerleme

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>

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.

Cherry MCP'yi deneyin