Igloo branding

ProgressBar

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

Installation

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

Usage

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" />;

API

PropTypeDescription
valuenumberSets the value of the progress bar, between 0 and 1 inclusive.
isCompactbooleanTrue for a compact 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.