<div class="progress-ring-wrap">
  <svg viewBox="0 0 80 80" width="80" height="80">
    <circle cx="40" cy="40" r="34"
      fill="none" stroke="var(--border)" stroke-width="8"/>
    <circle cx="40" cy="40" r="34"
      fill="none" stroke="var(--accent)" stroke-width="8"
      stroke-dasharray="213.6"
      stroke-dashoffset="53.4"  /* For 75%: 213.6 * (1 - 0.75) */
      stroke-linecap="round"
      transform="rotate(-90 40 40)"
      style="transition: stroke-dashoffset 0.6s cubic-bezier(0.16,1,0.3,1)"
    />
  </svg>
  <span class="progress-ring-label">75%</span>
</div>

<style>
.progress-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.progress-ring-label { position: absolute; font-size: 1rem; font-weight: 600; }
</style>