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: {
    components: [
      'QLinearProgress'
    ]
  }
}

Usage

Determined state



Indeterminate state



TIP

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

Query state



Reverse progress direction



Custom height



Stripe



Buffer



On a dark background



QLinearProgress API