Progress

The Progress component provides feedback to the user that some action is taking place.

Examples

Progress Bar

The base progress bar is available in three sizes and will display a completed amount equal to the value divided by the max (default 1).

import { Progress } from '@curology/ui-components-web/react';

<Progress 
  size="small|medium(default)|large"
  min="0"
  max="100"
  value={value} 
/>

Progress Percentage

When a progressType of percentage is passed, a small bar will be rendered with a numerical percentage displayed next to it. It can be left (default) or right aligned.

10%

10%

import { Progress } from '@curology/ui-components-web/react';

<Progress 
  ...
  progressType="percentage"
  align="left(default)|right"
/>

Progress Circle

When a progressType of circle is passed, a small spinning circle will be rendered. It can be passed a state which will determine the color of the circle.

import { Progress } from '@curology/ui-components-web/react';

<Progress 
  ...
  progressType="circle"
  state="''(default)|highlight|critical|success|dark"
/>

Indeterminate Progress Bar

If no value is provided, the progress bar will animate indefinitely.

import { Progress } from '@curology/ui-components-web/react';

<Progress ... />

Unknown Progress

To simulate movement without knowing exactly how much progress has been made, the UnknownProgress component is provided. It will internally generate a value that never reaches 100% until the done prop becomes true.

import { UnknownProgress } from '@curology/ui-components-web/react';

<UnknownProgress ... />

Props

Name	Type	Default Value	Required	Description
align	"left" | "right" | ProgressAlign	ProgressAlign.Left;	No	Which side should the percentage be aligned to?
children	((percentage: number | null) => Element)		No	Allow for children to be rendered dynamically with knowledge of how far along the progress is.
max	string | number	1	No	Describes how much work the task indicated by the `progress` element requires. If present, must have a value greater than `0` and be a valid floating point number.
progressType	"circle" | ProgressType | "bar" | "percentage"	ProgressType.Bar	No	Which type of progress tracker should be displayed?
size	"small" | "medium" | "large" | ProgressSize		No	The size of the progress indicator. Ignored for any type besides `ProgressType.Bar`.
state	"critical" | "success" | "dark" | "highlight" | ProgressState		No	The state of the progress indicator. Ignored for any type besides `ProgressType.Circle`.
track	boolean		No	Should the track beneath the progress bar be shown?
value	string | number	0	No	Specifies how much of the task that has been completed. It must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. If `undefined`, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.