Linear Progress

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.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QLinearProgress'
    ]
  }
}

Usage

Determined state

Determined state



Indeterminate state

Indeterminate state



TIP

For indeterminate state (above) or query state (below) you don’t need to specify the value property.

Query state



Reversed

Reverse progress direction



Style

Custom height



Standard sizes



Stripe



On a dark background



Buffer

Buffer



With a label

To add a label to the progress bar you can use the default slot. Take care to:

  • use a size big 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
With a label



QLinearProgress API