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.

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.

NameTypeDefaultDescription
classNamestringAdditional CSS classes.
maxValuenumber100 Maximum possible value.
messagestringProvides a message to the user along with the component.
minValuenumber0 Minimum possible value.
onTransitionEndIn() => voidCalled when the css transition ends on the way in.
onTransitionEndOut() => voidCalled 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.
refRef<HTMLDivElement>Ref for the wrapping element.
valuenumberCurrent progress value within the range specified, or the default range of 0-100.
variant
'ring' |'bar' |'ellipsis' 
"ring" Determines which variant should be rendered.
visiblebooleantrue 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.

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

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