Progress

The Progress component is used to provide feedback to a user for an action or event that may have a perceptible duration.

For more information on how to use the features and props for this component, check out the developer documentation.

Usage

The Progress component will render in an indeterminate state by deafult. This will result in an endless animation loop for the chosen variant. If a value is passed to the Progress component, it will render in a determinate state displaying the Progress between that value and the minValue and maxValue range of the progression. This range is from 0 to 100 by default.

The Progress component will only be visible on screen when the visible prop is true. There are three placements the Progress component may render in:

local: Renders above a backdrop that is confined to its parent container.
global: Renders above a backdrop that engulfs the entire viewport.
inline: Renders inline with its DOM siblings.

Indeterminate

This version of the Progress component notifies the user the process has begun and is loading, but does not specify the exact value left for the process to complete. The indeterminate version can be displayed as a ring, bar, or ellipsis variant.

Determinate

This version of the Progress component displays the exact value (e.g. time, percentage) left for the process to complete The determinate version can be displayed as a ring or bar variant.

Properties

Name	Type	Default	Description
`className`	`string`		Additional CSS classes.
`maxValue`	`number`	`100`	Maximum possible value.
`message`	`string`		Provides a message to the user along with the component.
`minValue`	`number`	`0`	Minimum possible value.
`onTransitionEndIn`	`() => void`		Called when the css transition ends on the way in.
`onTransitionEndOut`	`() => void`		Called when the css transition ends on the way out...A good time to unmount!
`placement`	`'global' \|'local' \|'inline'`	`"global"`	Determines the placement of the component.
`ref`	`Ref<HTMLDivElement>`		Ref for the wrapping element.
`value`	`number`		Current progress value within the range specified, or the default range of 0-100.
`variant`	`'ring' \|'bar' \|'ellipsis'`	`"ring"`	Determines which variant should be rendered.
`visible`	`boolean`	`true`	When true, fade in occurs when component mounts. When false, mounted component fades out then re-renders self and returns null, removing itself from the DOM. This is technically not the same as unmounting via parent.

Custom theming

You can override the styles of the Progress component by setting a custom theme on the Configuration component.

Theme properties

{      'progress-color': 'base.palette.brand-primary' // → base.palette.brand-primary
    }
  }
}