CSS-only data visualization components for admin dashboards. Progress bars, rings, gauges, heatmaps, sparklines, and more.
1. Progress Bars
Horizontal progress indicators with size, color, striped, and animated variants.
Default (with labels)
Color Variants
Sizes
Striped & Animated
Rounded (Pill)
2. Stacked Bars
Multiple colored segments in one bar showing breakdowns and distributions.
Disk Usage (256 GB)
Browser Market Share
3. Progress Rings
Circular progress indicators using CSS conic-gradient. Set value via style="--value: 72" (0-100).
Color Variants
Sizes
4. Dashboard Gauges
Semi-circle gauge indicators. Set value via style="--value: 72" (0-100).
5. Data Bars in Tables
Inline bar visualization inside table cells for quick comparison.
| # | Sales Rep | Revenue | Performance | Target | Status |
|---|---|---|---|---|---|
| 1 | Sarah Chen | $142,500 | 95% | On Track | |
| 2 | James Wilson | $128,300 | 85% | On Track | |
| 3 | Maria Garcia | $98,700 | 66% | At Risk | |
| 4 | Tom Baker | $76,200 | 51% | Behind | |
| 5 | Lisa Park | $112,900 | 75% | Steady |
6. Activity Heatmap
GitHub contribution-style activity grid. Each cell uses data-level="0-4" for intensity.
Contribution Activity (12 weeks)
Color Variant (Success)
7. Sparkline Bars
Compact mini bar charts for inline data visualization inside cards or table cells.
8. Combined: KPI Dashboard
Real-world example combining stat cards, progress rings, sparklines, and data bars.