0'dan 100'e Başarı Sayacı

<div class="progress-container">
  <div class="circular-progress">
    <div class="value-container">0%</div>
  </div>
  <p class="progress-text">Başarı Oranı</p>
</div>

.progress-container {
  display: flex; flex-direction: column; align-items: center; gap: 15px;
  background: rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.18);
}
.circular-progress {
  position: relative; height: 150px; width: 150px; border-radius: 50%;
  background: conic-gradient(#4d5bf9 3.6deg, rgba(255, 255, 255, 0.1) 0deg);
  display: flex; align-items: center; justify-content: center;
}
.circular-progress::before {
  content: ""; position: absolute; height: 120px; width: 120px;
  border-radius: 50%; background-color: #1a1a2e;
}
.value-container { position: relative; font-family: 'Inter', sans-serif; font-size: 35px; font-weight: 700; color: #fff; }
.progress-text { font-family: 'Inter', sans-serif; color: #a0a0b0; font-size: 16px; margin: 0; }

let progressBar = document.querySelector(".circular-progress");
let valueContainer = document.querySelector(".value-container");
let progressValue = 0; let progressEndValue = 100; let speed = 20;
let progress = setInterval(() => {
  progressValue++;
  valueContainer.textContent = `${progressValue}%`;
  progressBar.style.background = `conic-gradient(#4d5bf9 ${progressValue * 3.6}deg, rgba(255,255,255,0.1) ${progressValue * 3.6}deg)`;
  if (progressValue == progressEndValue) { clearInterval(progress); }
}, speed);