Skip to main content
🏠ComponentsProgress Bar

Progress Bar

A progress bar is a progress indicator, either determinate (indicating a percentage of progression) or indeterminate (indicating a state of loading).

The progress bar comes in two different types:

  • The determinate type, when progress can be calculated against a target (download, upload, known sizes, etc.)
  • The indeterminate type, when there is progress but the completion cannot be determined (connection to a server, retrieving unknown amount of data, etc.)

Indeterminate​

The indeterminate variant comes either as a bar bouncing from left to right or as an infinite loop by default. You can select the bounce animation by setting the property animation to bounce.

Default infinite loop​

<ProgressBar />
// or
<ProgressBar variant="indeterminate" />

Bounce animation​

<ProgressBar animation="bounce" />
// or
<ProgressBar variant="indeterminate" animation="bounce" />

Determinate​

The variant property is set to determinate with a value between 0 and 100 to specify the completed task using a progress bar.

<ProgressBar variant="determinate" value={20} />

Show value​

The value of a determinate progress bar can be displayed by setting showValue to true. By default, the progress bar will not display its value.

<ProgressBar
  variant="determinate"
  value={20}
  showValue={true}
/>

Color​

By default, progress bars are emphasized (primary theme), providing a visual prominence. For visual components where you don't want to emphasize the progress bar component, the neutral theme is more appropriate to deprioritize its focus on the screen.

Use the property color with primary and neutral values to change the colors. The primary color is set by default.

Indeterminate
Determinate
<ProgressBar color="primary" variant="determinate" value={60} />
<ProgressBar color="neutral" variant="determinate" value={60} />

Progress bar with label and caption​

Caption placeholder

Caption placeholder

<ProgressBar 
  label="Downloading" 
  caption="Caption placeholder" 
/>
<ProgressBar 
  variant="determinate" 
  value={20} 
  label="Downloading..." 
  caption="Caption placeholder" 
/>

Sizes​

Progress bars are available in three sizes to cater for the diverse range of use cases and devices that our business uses.

Set the size property to small, medium or large to change the size.

Small

Caption placeholder

Caption placeholder

Medium

Caption placeholder

Caption placeholder

Large

Caption placeholder

Caption placeholder

<ProgressBar size="small" variant="determinate" value={30} />
<ProgressBar size="medium" variant="determinate" value={50} />
<ProgressBar size="large" variant="determinate" value={70} />

States​

By default, the progress bar is in Loading state.

We also recommend using the Error state to make it obvious when the loading is encountering some issues.

Use the state property with the error or success values to update states.

Loading

Caption placeholder

Caption placeholder

Error

Caption placeholder

Caption placeholder

Success
Not applicable

Caption placeholder

<ProgressBar state="loading" variant="determinate" value={60} />
<ProgressBar state="error" variant="determinate" value={60} />
<ProgressBar state="success" variant="determinate" value={100} />

Custom Classes​

Add your own classes in the classes attribute. This way you will be able to override or extend the styles applied to the component (you can use available utility classes by importing @qtm/css/dist/utilities.css).

<ProgressBar 
  classes="w-1/2" 
  variant="determinate" 
  value={60} 
/>

Event handling​

Not applicable. The ProgressBar component is a visual element and does not support any event handlers directly. To update the progress value in a determinate progress bar, you should manage the state in your application and pass the updated value to the component.

API​

QtmProgressBar

PropertyTypeDefaultDescription
animation"bounce" | "loop"'loop'Progress bar with a bounce for when complete.
captionstring''A text caption
classesstring''list of classes to override or extend the styles applied to the component. You can use available utility classes by importing
color"neutral" | "primary"'primary'The color of element
labelstring''A text label
showValuebooleantrueIf false, the value of the determinate progress bar is not displayed
size"large" | "medium" | "small"'medium'The size of element
state"error" | "loading" | "success"'loading'The validation states, the success state is only for determinate case
valuenumbernullThe percentage complete as a value between 0 and 100
variant"determinate" | "indeterminate"'indeterminate'Progress bar type