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 boucing from left to right or as an infinite loop by default. You can select the bounce one just adding the qtm-bounce class.

Default infinite loop

<div class="qtm-progress-bar">
  <progress></progress>
</div>

Bounce animation

<div class="qtm-progress-bar qtm-bounce">
  <progress></progress>
</div>

Determinate

The value attribute is used to specify the completed task using a progress bar. It should be a number between 0 and 100.

<div class="qtm-progress-bar">
  <progress value="20" max="100"></progress>
</div>

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 qtm-primary and qtm-neutral classes to change the colors.

Indeterminate

Determinate

<div class="qtm-progress-bar qtm-neutral">
  <progress></progress>
</div>
<div class="qtm-progress-bar">
  <progress value="20" max="100"></progress>
</div>

Progress bar with label and caption

<div class="qtm-progress-bar">
  <label class="qtm-progress-bar-label">
    <span>Downloading...</span>
  </label>
  <progress></progress>
  <p class="qtm-progress-bar-caption">Caption placeholder</p>
</div>

<div class="qtm-progress-bar">
  <label class="qtm-progress-bar-label">
    <span>Downloading...</span>
    <span class="qtm-progress-bar-percentage">70%</span>
  </label>
  <progress value="20" max="100"></progress>
  <p class="qtm-progress-bar-caption">Caption placeholder</p>
</div>

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 qtm-small, qtm-medium or qtm-large classes to change the size.

Small

Medium

Large

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

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 qtm-error or qtm-success classes to update states.

Loading

Error

Success

Not applicable

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