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, segregated into two main components.

• The determinate type, when progress can be calculated against a target (download, upload, know sizes,...)

• The indeterminate type, when there is progress but the completion cannot be determined (connection to a server, retrieving unknown amount of data,...)

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 one just by setting the property animation to bounce.

Default infinite loop

<qtm-progress-bar></qtm-progress-bar>
<!-- or -->
<qtm-progress-bar variant="indeterminate"></qtm-progress-bar>

Bounce animation

<qtm-progress-bar animation="bounce"></qtm-progress-bar>
<!-- or -->
<qtm-progress-bar variant="indeterminate" animation="bounce"></qtm-progress-bar>

Determinate

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

<qtm-progress-bar variant="determinate" value="20"></qtm-progress-bar>

info

The determinate progress bar animation is less fluid on Firefox compared to other browsers due to differences in how browsers render and animate the <progress> element. This is an acceptable difference that does not affect the overall functionality. This is why we have not implemented any specific workaround for Firefox.

Show value

The value of a determinate progress bar is displayed by default. However, if show-value="false", the progress bar will not display its value.

<qtm-progress-bar
  variant="determinate"
  value="20"
  show-value="false"
></qtm-progress-bar>

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 for this deprioritize its focus on the screen.

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

Indeterminate

Determinate

<qtm-progress-bar color="neutral"></qtm-progress-bar>
<qtm-progress-bar variant="determinate" color="neutral" value="20"></qtm-progress-bar>

Progress bar with label and caption

<qtm-progress-bar label="Downloading..." caption="Caption placeholder"></qtm-progress-bar>
<qtm-progress-bar variant="determinate" value="20" label="Downloading..." caption="Caption placeholder"></qtm-progress-bar>

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

Medium

Large

<qtm-progress-bar size="small">...</qtm-progress-bar>
<qtm-progress-bar size="medium">...</qtm-progress-bar>
<qtm-progress-bar size="large">...</qtm-progress-bar>

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 state property with the .error or .success values to update states.

Loading

Error

Success

Not applicable

<qtm-progress-bar state="error">...</qtm-progress-bar>
<qtm-progress-bar state="success">...</qtm-progress-bar>

API

Loading API documentation...