Geri Dön

Çok Renkli Halka İlerleme

İlerleme Çubukları (0-100) / 2 Görüntülenme

Canlı Önizleme

100% Toplam

C# 45% Unity 35% CSS 20%

Nasıl Kullanılır?

SVG stroke-dashoffset ile halka çizimi yapılır. stroke-dasharray toplam çevre uzunluğu (2π×r). Her segmentin offset'i dolu bölüm çıkarılarak hesaplanır.

Kaynak Kodlar

HTML

<div class="ring-chart">
  <svg viewBox="0 0 200 200" width="200" height="200">
    <circle class="ring-bg" cx="100" cy="100" r="80"/>
    <circle class="ring-seg seg-1" cx="100" cy="100" r="80"/>
    <circle class="ring-seg seg-2" cx="100" cy="100" r="80"/>
    <circle class="ring-seg seg-3" cx="100" cy="100" r="80"/>
  </svg>
  <div class="ring-center">
    <span class="ring-pct">100%</span>
    <span class="ring-lbl">Toplam</span>
  </div>
</div>
<div class="ring-legend">
  <span class="dot" style="background:#6C5CE7"></span> C# 45%
  <span class="dot" style="background:#00cec9"></span> Unity 35%
  <span class="dot" style="background:#fd79a8"></span> CSS 20%
</div>

CSS

.ring-chart {
  position: relative; display: inline-block; font-family: 'Inter', sans-serif;
}
circle { fill: none; stroke-width: 18; }
.ring-bg { stroke: rgba(255,255,255,0.08); }
/* r=80 → çevre = 2π*80 ≈ 502.6 */
.ring-seg {
  stroke-dasharray: 502.6;
  stroke-linecap: round;
  transform-origin: 100px 100px;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4,0,0.2,1),
              opacity 0.3s;
}
/* %45 = 502.6*0.45 ≈ 226 */
.seg-1 { stroke: #6C5CE7; stroke-dashoffset: 277; transform: rotate(-90deg); }
/* %35 = 502.6*0.35 ≈ 176; offset = 502.6-176+502.6*0.45 */
.seg-2 { stroke: #00cec9; stroke-dashoffset: 327; transform: rotate(72deg); }
/* %20 = 502.6*0.20 ≈ 100 */
.seg-3 { stroke: #fd79a8; stroke-dashoffset: 402; transform: rotate(198deg); }

.ring-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; color: #fff;
}
.ring-pct { font-size: 32px; font-weight: 800; }
.ring-lbl { color: #a0a0b0; font-size: 13px; margin-top: 2px; }
.ring-legend {
  display: flex; gap: 16px; margin-top: 15px; font-size: 13px;
  color: #c0c0d0; font-family: 'Inter', sans-serif; align-items: center;
}
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

JavaScript

// Yüklenince animate et
window.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.ring-seg').forEach((el, i) => {
    const delays = [0, 0.2, 0.4];
    el.style.transitionDelay = delays[i] + 's';
    // Aslında offset zaten ayarlı, sadece trigger için class ekle:
    el.style.opacity = '1';
  });
});

Navigasyon

Keşfet