IProgressBarProps

@spartanfx/react v1.2.2

---

@spartanfx/react / index / IProgressBarProps

Interface: IProgressBarProps

Props for the ProgressBar component.

Properties

Required

Property	Type	Default	Description
current	number	-	The current progress value.
total	number	-	The total value that represents 100% progress.

Options

Property	Type	Default	Description
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	ProgressBarMode.Bar	Mode variant: 'bar' for traditional horizontal bar, 'circle' for circular ring progress, 'pie' for pie chart
showAsPercentage?	boolean	false	If true, displays the value as a percentage (e.g., "75%"). Otherwise, displays the raw value as current/total.
showValue?	boolean	false	Whether to show the current progress value inside the bar.
size?	ProgressBarSize	'medium'	Size preset for circle style: 'small' (60px), 'medium' (100px), 'large' (140px), 'custom'
strokeSizePercent?	number	20	Stroke size as percentage of radius (10-50). Only applies to ProgressBarMode.Cirlce mode.

Appearance & theming

Property	Type	Default	Description
appearance?	AppearanceMode	AppearanceMode.light	Appearance mode: light or dark
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.
tokens?	IProgressBarTokens	-	Customization tokens for styling