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​