progress ring circular widget dashboard storage progress ring circular progress conic gradient percentage widget show progress percentage circular progress indicator storage usage display
Progress Widget
Fetch pattern JSON:
curl https://webspire.de/patterns/progress-widget/base.json base.html
<div class="ws-progress-widget rounded-2xl border p-6 max-w-xs w-full text-center"
style="
--ws-progress-widget-bg: oklch(0.99 0.005 75);
--ws-progress-widget-text: oklch(0.25 0.02 75);
--ws-progress-widget-text-soft: oklch(0.40 0.015 75);
--ws-progress-widget-text-muted: oklch(0.55 0.01 75);
--ws-progress-widget-border: oklch(0.90 0.01 75);
--ws-progress-widget-accent: oklch(0.55 0.15 250);
--ws-progress-widget-accent-soft: oklch(0.92 0.04 250);
--ws-progress-widget-track: oklch(0.93 0.01 75);
background: var(--ws-progress-widget-bg);
color: var(--ws-progress-widget-text);
border-color: var(--ws-progress-widget-border);
">
<!-- Circular Progress Ring -->
<div class="mx-auto mb-5 relative flex items-center justify-center"
role="progressbar"
aria-valuenow="73"
aria-valuemin="0"
aria-valuemax="100"
aria-label="Storage used: 73 percent"
style="width: 160px; height: 160px;">
<!-- Conic gradient ring -->
<div class="absolute inset-0 rounded-full"
style="background: conic-gradient(var(--ws-progress-widget-accent) 0% 73%, var(--ws-progress-widget-track) 73% 100%);"></div>
<!-- Inner mask circle -->
<div class="absolute rounded-full"
style="
inset: 14px;
background: var(--ws-progress-widget-bg);
"></div>
<!-- Percentage text -->
<span class="relative text-4xl font-bold tabular-nums tracking-tight"
style="color: var(--ws-progress-widget-text);">73%</span>
</div>
<p class="text-sm font-semibold tracking-tight"
style="color: var(--ws-progress-widget-text);">Storage Used</p>
<p class="mt-1 text-xs"
style="color: var(--ws-progress-widget-text-muted);">14.6 GB of 20 GB</p>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
progressringcircularwidgetdashboardstorage
A CSS-only circular progress ring built with conic-gradient, showing 73% storage usage. The ring uses a mask technique with an inner circle overlay to create the donut shape. Centered layout with large percentage number, label, and subtitle.