Progress Ring Base

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

base.html

<div class="ws-progress-ring flex flex-wrap items-center justify-center gap-8 py-8">
  <div class="flex flex-col items-center gap-3">
    <div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="25 percent">
      <svg viewBox="0 0 120 120" class="h-24 w-24 -rotate-90">
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" class="stroke-[var(--ws-progress-ring-border)]" />
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke-linecap="round" class="stroke-[var(--ws-progress-ring-accent)]" stroke-dasharray="314.16" stroke-dashoffset="235.62" />
      </svg>
      <span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">25%</span>
    </div>
    <span class="text-sm text-[var(--ws-progress-ring-text-soft)]">Storage</span>
  </div>

  <div class="flex flex-col items-center gap-3">
    <div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="75 percent">
      <svg viewBox="0 0 120 120" class="h-24 w-24 -rotate-90">
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" class="stroke-[var(--ws-progress-ring-border)]" />
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke-linecap="round" class="stroke-[var(--ws-progress-ring-accent)]" stroke-dasharray="314.16" stroke-dashoffset="78.54" />
      </svg>
      <span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">75%</span>
    </div>
    <span class="text-sm text-[var(--ws-progress-ring-text-soft)]">Memory</span>
  </div>

  <div class="flex flex-col items-center gap-3">
    <div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" aria-label="100 percent">
      <svg viewBox="0 0 120 120" class="h-24 w-24 -rotate-90">
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" class="stroke-[var(--ws-progress-ring-border)]" />
        <circle cx="60" cy="60" r="50" fill="none" stroke-width="10" stroke-linecap="round" class="stroke-[var(--ws-progress-ring-accent)]" stroke-dasharray="314.16" stroke-dashoffset="0" />
      </svg>
      <span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">100%</span>
    </div>
    <span class="text-sm text-[var(--ws-progress-ring-text-soft)]">Upload</span>
  </div>
</div>

Details

Family

progress-ring

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

progressringcircularpercentageindicatordonutchart

Slots

Name	Required	Description
percentage	Yes	Center percentage text display.
label	No	Label text below the ring.

Circular SVG progress rings at 25%, 75%, and 100% with labels below. Uses stroke-dasharray and stroke-dashoffset on an SVG circle to render progress. Each ring includes role="progressbar" with aria-valuenow for screen readers.