Skip to main content

Progress Loader

Displays a loading progress bar to indicate the realtime state of an action.

Installation

Install

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

Import

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

Accessibility

Accessibility documentation

(opens in new window)

Usage

When the application is waiting on an action to complete such as an uploaded document

Default

Loader with the progress value calculated from a time estimate (defaulted to 10 seconds)

Set Estimated time to completion

Loader with the progress value calculated from a time estimate provided

Set Value

Loader with an explicitly-set progress value (mutually exclusive with msEstimatedCompletion). Use this if you want your project to explicitly manage the progress value shown (eg. show 25% complete, then change to 45%, etc). The valueDecimalFraction must be provided as a decimal between 0 and 1.

Properties

Name
Description
  • children
    ReactNodechildren (text)
  • valueDecimalFraction
    numbermsAlreadyElapsed if you may want to start at a 5second point of 10seconds (50% mark)
  • msEstimatedCompletion
    numberestimated time in milliseconds (defaulted to 10000)
  • className
    stringAdditional CSS classes to be applied
  • id
    stringHTML id attribute for the component

CSS Variables