progress ring dashboard metrics cpu memory disk network monitoring progress ring dashboard metrics cpu memory disk network monitoring system dashboard metric rings system monitoring progress indicators
Progress Ring Dashboard
Fetch pattern JSON:
curl https://webspire.de/patterns/progress-ring/dashboard.json dashboard.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="68" aria-valuemin="0" aria-valuemax="100" aria-label="CPU at 68 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-blue-500" stroke-dasharray="314.16" stroke-dashoffset="100.53" />
</svg>
<span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">68%</span>
</div>
<span class="text-sm font-medium text-[var(--ws-progress-ring-text-soft)]">CPU</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Memory at 45 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-green-500" stroke-dasharray="314.16" stroke-dashoffset="172.79" />
</svg>
<span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">45%</span>
</div>
<span class="text-sm font-medium 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="82" aria-valuemin="0" aria-valuemax="100" aria-label="Disk at 82 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-amber-500" stroke-dasharray="314.16" stroke-dashoffset="56.55" />
</svg>
<span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">82%</span>
</div>
<span class="text-sm font-medium text-[var(--ws-progress-ring-text-soft)]">Disk</span>
</div>
<div class="flex flex-col items-center gap-3">
<div class="relative inline-flex items-center justify-center" role="progressbar" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100" aria-label="Network at 23 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-violet-500" stroke-dasharray="314.16" stroke-dashoffset="241.90" />
</svg>
<span class="absolute text-lg font-semibold text-[var(--ws-progress-ring-text)]">23%</span>
</div>
<span class="text-sm font-medium text-[var(--ws-progress-ring-text-soft)]">Network</span>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
progressringdashboardmetricscpumemorydisknetworkmonitoring
Slots
| Name | Required | Description |
|---|---|---|
| rings | Yes | Individual progress rings with metric data. |
| label | Yes | Metric label below each ring. |
Four progress rings in a horizontal flex row showing CPU (68%, blue), Memory (45%, green), Disk (82%, amber), and Network (23%, violet). Each ring uses a different Tailwind stroke color for visual differentiation. Ideal for server dashboards and admin monitoring panels.