ProgressBar – Once UI

A component for showing the progress of an action or task with an animation as it progresses.

ProgressBar

const [value, setValue] = useState<number>(0);

useEffect(() => {
  let currentValue = 0;
  const interval = setInterval(() => {
    currentValue += 1;
    setValue(currentValue);
    
    if (currentValue >= 100) {
      clearInterval(interval);
    }
  }, 50);
  
  return () => clearInterval(interval);
}, []);

return (
  <ProgressBar value={value} />
);

Label

You can disable the label by setting the showLabel prop to false.

Label

<ProgressBar value={50} showLabel={false} />

BarBackground

You can modify the bar background by setting the barBackground prop to a solid style property.

BarBackground

50%

<ProgressBar value={50} barBackground="accent-medium" />

Label position

Control where the percentage label appears using the labelPosition prop.

Label position

75%

50%

65%

85%

<ProgressBar value={75} labelPosition="top" />
<ProgressBar value={50} labelPosition="bottom" />
<ProgressBar value={65} labelPosition="left" />
<ProgressBar value={85} labelPosition="right" />

API reference

	Type	Default
valuerequired Where the bar sits, between min and max.	number	—
min Value at an empty bar.	number	0
max Value at a full bar.	number	100
showLabel Show the percentage alongside the bar.	boolean	true
labelPosition Which side the label sits on.	topbottomleftright	bottom
barBackground Fill colour of the bar itself.	StyleProps["solid"]	brand-strong
className	string	—
style	React.CSSProperties	—
…and every FlexProps prop	inherited	—