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 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 variant
property 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>
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 neutral
values to change the colors. The primary color is set by default.
<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.
<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.
<qtm-progress-bar state="error">...</qtm-progress-bar>
<qtm-progress-bar state="success">...</qtm-progress-bar>
APIβ
qtm-progress-bar
Property | Type | Default | Description |
---|---|---|---|
animation | "bounce" | "loop" | 'loop' | Progress bar with a bounce for when complete. |
caption | string | '' | A text caption |
classes | string | '' | 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 |
label | string | '' | A text label |
showValue | boolean | true | If 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 |
value | number | null | The percentage complete as a value between 0 and 100 |
variant | "determinate" | "indeterminate" | 'indeterminate' | Progress bar type |