Progress bar that displays linear progress. Works best with elements that do not involve specific steps.


To install @igloo-ui/progress-bar in your project, you will need to run the following command using npm:

npm install @igloo-ui/progress-bar

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/progress-bar


Then to use the component in your code just import it!

import ProgressBar from '@igloo-ui/progress-bar';

<ProgressBar value={0.7} ariaLabel="Progress: 70% of objectives achieved" />;


valuenumberSets the value of the progress bar, between 0 and 1 inclusive.
isCompactbooleanTrue for a compact appearance.
isLowContrastbooleanTrue for a light appearance.
classNamestringAdd a specific class to the component.
dataTeststringAdd a data-test tag for automated tests.
ariaLabelstringDefines a string value that labels the current element.