Skip to main content

Progress Loader

Component
Live

The Progress Loader component shows the progress of an ongoing action.

FigmaCode

Usage​

The Progress Loader displays a loading bar to indicate the real-time progress or action. It also contains loading text to describe the delay to the user, and completion percentage. There are 3 variants: Set Value, Set Estimated Time to Completion and Inline.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { ProgressLoader } from "@iag/chroma-react-ui.components";

When to use​

Use the Set Value or Set Estimated Time to Completion variants to temporarily communicate the progress of a known, measurable process to the user. For example, file uploads or task processing, where the progression can be quantified and updated in real time.

Use the Inline variant to provide a persistent visual indicator of a user's progress through a process or task. For example, form processes that don’t follow predefined steps or when screen space is limited and the emphasis is on overall completion rather than individual stages.

When to avoid​

Avoid using Progress Loaders for actions when the load time can’t be estimated. In such scenarios, consider using the Spinner component. Also avoid when the progression is non-linear or may change, causing the progress to fluctuate and cause confusion. Or if users require knowing the individual steps for context or navigation, consider Progress Indicator.

Do

  • Do include informative labels to offer the reason for waiting, such as 'Your payment is being processed' or 'Loading results'.
  • Do place consistently within the interface to maintain a cohesive user experience.

Don't

  • Don’t show the Progress Loader as a repetitive animation.
  • Don’t send the bar progress backwards.

Variants​

  • Set Value - Use to manage the progress value shown (eg. show 25% complete, then change to 45%, etc).

  • Set Estimated Time to Completion - Use to show the progress value calculated from a time estimate provided.

  • Inline - Use to embed directly within a page layout, ensuring it remains visible at all times to provide users with real-time feedback on their progress through a multi-step process or task.