Progress

Provides visual 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';

<Progress 
  size="{sm|md(default)|lg}"
  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';

<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, or a size.

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

<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';

<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/Progress/UnknownProgress';

<UnknownProgress ... />

Props

ProgressProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
align	"left" | "right"	'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" | "bar" | "percentage"	'bar'	No	Which type of progress tracker should be displayed?
size	"md" | "lg" | "sm"		No	The size of the progress indicator. Ignored for any type besides `'bar'` or `'circle'`.
state	"dark" | "highlight" | "critical" | "success"		No	The state of the progress indicator. Ignored for any type besides `'circle'`.
track	false | true		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.