CircularGauge
A ring/arc gauge component rendered via SVG.
CircularGauge renders a circular progress indicator using SVG stroke-dasharray animation.
Import
import { CircularGauge } from "@fcannizzaro/streamdeck-react";Props
interface CircularGaugeProps {
className?: string;
value: number;
max?: number;
size?: number;
strokeWidth?: number;
color?: string;
background?: string;
style?: CSSProperties;
}| Prop | Default | Description |
|---|---|---|
value | -- | Current value |
max | 100 | Maximum value |
size | 80 | Diameter in pixels |
strokeWidth | 6 | Ring thickness in pixels |
color | '#2196F3' | Foreground arc color |
background | '#333' | Background ring color |
Example
<CircularGauge value={75} max={100} size={80} strokeWidth={6} color="#2196F3" background="#333" />How It Works
The gauge renders two SVG circle elements:
- A background circle (full ring in the
backgroundcolor). - A foreground circle with
strokeDasharrayandstrokeDashoffsetto show partial fill, rotated -90 degrees so the arc starts from the top.