The QLinearProgress component displays a colored loading bar. The bar can either have a determinate progress or an indeterminate animation. It should be used to inform the user that an action is occurring in the background.
Usage
Determined state
Indeterminate state
For indeterminate state (above) or query state (below) you don’t need to specify the value property.
Reversed
Style
Buffer
With a label
To add a label to the progress bar you can use the default slot. Take care to:
- use a
sizebig enough to allow showing the label - set a text color for the label so that it is visible both on the filled and unfilled areas, or use text-shadow CSS, or use a QBadge as in the example below
Accessibility v2.25+
QLinearProgress exposes role="progressbar" with aria-valuemin="0", aria-valuemax="1" and aria-valuenow set to the current value — note that the scale is 0…1, matching the value prop. While indeterminate (or in query mode, which animates the same way), aria-valuenow is dropped, as the pattern requires. The bar has no accessible name of its own, so add an aria-label describing what is progressing.