Progress Ring With Label

Fetch pattern JSON: curl https://webspire.de/patterns/progress-ring/with-label.json

with-label.html

<div class="ws-progress-ring flex flex-col items-center gap-4 py-8">
  <div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" aria-label="78 percent storage used">
    <svg viewBox="0 0 160 160" class="h-40 w-40 -rotate-90">
      <circle cx="80" cy="80" r="68" fill="none" stroke-width="12" class="stroke-[var(--ws-progress-ring-border)]" />
      <circle cx="80" cy="80" r="68" fill="none" stroke-width="12" stroke-linecap="round" class="stroke-[var(--ws-progress-ring-accent)]" stroke-dasharray="427.26" stroke-dashoffset="93.99" />
    </svg>
    <div class="absolute flex flex-col items-center">
      <span class="text-3xl font-bold text-[var(--ws-progress-ring-text)]">78%</span>
      <span class="text-xs text-[var(--ws-progress-ring-text-soft)]">Storage Used</span>
    </div>
  </div>
  <p class="text-sm text-[var(--ws-progress-ring-text-soft)]">6.2 GB of 8 GB</p>
</div>

Details

Family

progress-ring

Tier

enhanced

Kind

component

Extends

progress-ring/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

progressringlabelstorageusagedetail

Slots

Name	Required	Description
percentage	Yes	Large percentage number in center.
label	Yes	Label text below percentage inside ring.
detail	No	Detail text below the ring.

Larger progress ring (160x160) with percentage and descriptive label centered inside. Below the ring, a detail line shows “6.2 GB of 8 GB”. Ideal for storage, quota, or capacity displays.