Progress Loader
The Progress Loader component shows the progress of an ongoing action.
- Usage
- Examples
- Properties
- Accessibility
- CSS Variables
Usage
The Progress Loader displays a loading bar to indicate the real-time progress of a system action. It also contains loading text to describe the delay to the user, and completion percentage. There are 2 variants: Set Value and Set Estimated Time to Completion.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { ProgressLoader } from "@iag/chroma-react-ui.components";
When to use
Use the Progress Loader to communicate the progression of a known, quantifiable process to the user. For example, during a file upload or processing a set task.
When to avoid
Avoid using Progress Loader for actions when the load time can’t be estimated. In such scenarios, consider using the Spinner component.
Do
- Do include informative labels to offer the reason for waiting, such as 'Your payment is being processed' or 'Loading results'.
Don't
- Don’t show the Progress Loader as a repetitive animation.
Visual Style
The Progress Loader is styled in accordance with the brand's colour scheme and design language. It's typically presented as a horizontal bar.
Variants
Use the Set Value variant to manage the progress value shown (eg. show 25% complete, then change to 45%, etc). Use the Set Estimated Time to Completion variant to show the progress value calculated from a time estimate provided.