stats progress usage storage bandwidth dashboard stats progress bar usage storage bandwidth api stat cards with progress bars usage metrics display
Stats with Progress
Fetch pattern JSON:
curl https://webspire.de/patterns/data-stats/with-progress.json with-progress.html
<section class="ws-data-stats bg-[var(--ws-data-stats-bg)] py-20">
<div class="mx-auto max-w-7xl px-6">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Storage</p>
<span class="text-sm font-semibold text-[var(--ws-data-stats-text)]">75%</span>
</div>
<p class="mt-2 text-2xl font-bold text-[var(--ws-data-stats-text)]">7.5 GB</p>
<p class="text-sm text-[var(--ws-data-stats-text-soft)]">of 10 GB used</p>
<div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-[var(--ws-data-stats-border)]" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Storage usage: 75%">
<div class="h-full rounded-full bg-[var(--ws-data-stats-accent)]" style="width: 75%"></div>
</div>
</div>
<div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">Bandwidth</p>
<span class="text-sm font-semibold text-[var(--ws-data-stats-text)]">45%</span>
</div>
<p class="mt-2 text-2xl font-bold text-[var(--ws-data-stats-text)]">45 GB</p>
<p class="text-sm text-[var(--ws-data-stats-text-soft)]">of 100 GB used</p>
<div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-[var(--ws-data-stats-border)]" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="Bandwidth usage: 45%">
<div class="h-full rounded-full bg-[var(--ws-data-stats-accent)]" style="width: 45%"></div>
</div>
</div>
<div class="rounded-2xl border border-[var(--ws-data-stats-border)] bg-[var(--ws-data-stats-bg)] p-6 shadow-md">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-data-stats-text-soft)]">API Calls</p>
<span class="text-sm font-semibold text-[var(--ws-data-stats-text)]">92%</span>
</div>
<p class="mt-2 text-2xl font-bold text-[var(--ws-data-stats-text)]">9,200</p>
<p class="text-sm text-[var(--ws-data-stats-text-soft)]">of 10,000 limit</p>
<div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-[var(--ws-data-stats-border)]" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100" aria-label="API calls usage: 92%">
<div class="h-full rounded-full bg-red-500" style="width: 92%"></div>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
statsprogressusagestoragebandwidthdashboard
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Grid of stat cards with label, value, and progress bar. |
Three-column responsive grid of usage stat cards. Each shows a label, percentage, value with context, and a colored progress bar. Storage (75%), Bandwidth (45%), and API Calls (92% with red warning color). Progress bars use role="progressbar" for accessibility.