Components
Circular Progress
SVG arc-based radial progress ring with neon glow filter, animated fill transition, tick mark at origin, center value display, and sub-label. Zero dependencies beyond React.
npx neonblade add circular-progressLIVE LOADING
10%SIGNAL
Real-time value
Animating between 10 – 95%
Smooth transition on every change
USE CASE — SYSTEM MONITOR
0%CPU
0%MEM
0%DISK
0%NET
SIZES
65%SM
65%MD
65%LG
65%XL
GLOW INTENSITY
70%NONE
70%LOW
70%MED
70%HIGH
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Current fill value (0 to max). |
max | number | 100 | Maximum value. |
color | "cyan" | "pink" | "green" | string | "cyan" | Neon accent color for the arc stroke. |
size | "sm" | "md" | "lg" | "xl" | "md" | Overall diameter preset. |
strokeWidth | number | - | Arc stroke width in px. Auto-derived from size if omitted. |
showValue | boolean | true | Show the percentage value in the center. |
centerLabel | string | - | Custom center label (replaces the auto %). |
subLabel | string | - | Smaller sub-label below the value. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Neon drop-shadow glow on the arc. |
className | string | - | Additional className on the wrapper. |