CSS-only data visualization components for admin dashboards. Progress bars, rings, gauges, heatmaps, sparklines, and more.
1. Barras de progreso
Horizontal progress indicators with size, color, striped, and animated variants.
Predeterminado (con etiquetas)
Variantes de color
Tamaños
Rayado y animado
Redondeado (píldora)
2. Barras apiladas
Multiple colored segments in one bar showing breakdowns and distributions.
Uso del disco (256 GB)
Cuota de mercado de navegadores
3. Anillos de progreso
Circular progress indicators using CSS conic-gradient. Set value via style="--value: 72" (0-100).
Color Variants
Tamaños
4. Indicadores de panel
Semi-circle gauge indicators. Set value via style="--value: 72" (0-100). v2.7.0 rebuilt the gauge as a true transparent ring — label moved out of the donut, sits below alongside __min and __max.
Anulación de tamaño · v2.7.0 atributo :size
New :size attr emits --pa-gauge-size inline (default upstream 12rem). Width and height (always half the width) both derive from this token. Text inside the donut doesn't auto-scale — set font-size on .pa-gauge__value in your stylesheet for proportional resizing.
5. Barras de datos en tablas
Inline bar visualization inside table cells for quick comparison.
| # | Representante de ventas | Ingresos | Rendimiento | Objetivo | Estado |
|---|---|---|---|---|---|
| 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. Mapa de calor de actividad
GitHub contribution-style activity grid. Each cell uses data-level="0-4" for intensity.
Actividad de contribuciones (12 semanas)
Variante de color (Éxito)
7. Barras sparkline
Compact mini bar charts for inline data visualization inside cards or table cells.
8. Combinado: panel de KPI
Real-world example combining stat cards, progress rings, sparklines, and data bars.