Progress

core package3.2.2

Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.

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

Usage

The Progress component will render in an indeterminate state by default. 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.
  • block: Renders as display block around its DOM siblings.

If the Progress component is only set visible for less than 100ms, it will not render at all. This is done to prevent a quick flash of the component on the screen for very short load times. If the visible prop is on for 100ms or more, the Progress component will stay rendered for at least 1 full second.

Disclaimer: By selecting the global placement in the demo below, the entire screen will be disabled, requiring a refresh of your browser to continue.

Related components

Properties

NameDescriptionDefaultType
classNameAdditional CSS classes.string
maxValueMaximum possible value.100number
messageProvides a message to the user along with the component.string
minValueMinimum possible value.0number
onTransitionEndIn() => void
onTransitionEndOut() => void
placementDetermines the placement of the component."global"
'inline' |'global' |'local' 
refRef for the wrapping element.Ref<HTMLDivElement>
valueCurrent progress value within the range specified, or the default range of 0-100.number
variantDetermines which variant should be rendered."ring"
'ellipsis' |'ring' |'bar' 
visibleWhen 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.trueboolean

Custom theming

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

Example

Theme properties

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