IProgressBarProps
@spartanfx/react / IProgressBarProps
Interface: IProgressBarProps
Props for the ProgressBar component.
Properties
| Property | Type | Description |
|---|---|---|
appearance? | AppearanceMode | Appearance mode: light or dark Default AppearanceMode.light |
classNames? | object | Optional class name overrides for styling different elements of the component. |
classNames.bar? | string | Class name for the bar fill element. |
classNames.circle? | string | Class name for the circle svg element. |
classNames.label? | string | Class name for the label element. |
classNames.root? | string | Class name for the root container. |
classNames.text? | string | Class name for the text element inside the bar. |
classNames.wrapper? | string | Class name for the bar wrapper element. |
current | number | The current progress value. |
customSize? | number | Custom width in pixels when size is 'custom' (only for circle and pie style) Only applies in ProgressBarMode.Cirlce and ProgressBarMode.Pie mode |
label? | string | Optional label displayed above the progress bar. |
mode? | ProgressBarMode | Mode variant: 'bar' for traditional horizontal bar, 'circle' for circular ring progress, 'pie' for pie chart Default ProgressBarMode.Bar |
showAsPercentage? | boolean | If true, displays the value as a percentage (e.g., "75%"). Otherwise, displays the raw value as current/total. Default false |
showValue? | boolean | Whether to show the current progress value inside the bar. Default false |
size? | ProgressBarSize | Size preset for circle style: 'small' (60px), 'medium' (100px), 'large' (140px), 'custom' Default 'medium' |
strokeSizePercent? | number | Stroke size as percentage of radius (10-50). Only applies to ProgressBarMode.Cirlce mode. Default 20 |
tokens? | IProgressBarTokens | Customization tokens for styling |
total | number | The total value that represents 100% progress. |