Progress Bar (QProgress)     

A Progress bar is used to show a process is being worked on, so the user isn’t staring at a static page, even though the system is working in the background. It is a good visual indicator (i.e. good UX) for the user, when waiting for longer term operations to be accomplished.

Installation

Edit /quasar.conf.js:

framework: {
components: ['QProgress']
}

Basic usage

<q-progress :percentage="progressModel" />

<!-- with buffering; 4px height looks best -->
<q-progress
:percentage="progressBuffer"
:buffer="buffer"
style="height: 4px"
/>

Vue Properties

PropertyTypeDescription
percentageNumberProgress (in percentage).
bufferNumberBuffer (in percentage).
colorStringThe Quasar CSS color value the bar should be.
stripeBoolenIf set to true, the progress bar will be striped.
animateBooleanIf set to true, the progress bar will be animated.
indeterminateBooleanIf set to true, the state is indeterminate, meaning it is unknown when the progress will stop.
heightStringCSS unit for height of QProgress.

Percentage and buffer, being percentage values, must be between 0 and 100, and percentage + buffer must be lower or equal to 100. If percentage is outside this interval the component will parse it and make it be within the interval.

For color, use one from the Quasar Color Palette.

Examples:

<q-progress :percentage="progress" color="teal-4" />
<q-progress :percentage="progress" color="positive" />
<q-progress :percentage="progress" color="info" />
<q-progress :percentage="progress" color="warning" />

For stripes, just add the stripe prop.

Examples:

<q-progress :percentage="progress" color="positive" stripe />
<q-progress :percentage="progress" color="info" stripe />
<q-progress :percentage="progress" color="warning" stripe />

For buffering, use the buffer prop.

<q-progress :percentage="progress" color="positive" stripe :buffer="buffer" />
<q-progress :percentage="progress" color="info" stripe :buffer="buffer" />
<q-progress :percentage="progress" color="warning" stripe :buffer="buffer" />

If you cannot calculate the progress in percent, use the indeterminate prop.

<q-progress indeterminate />
<q-progress indeterminate color="positive" />
<q-progress indeterminate color="warning" />
<q-progress indeterminate color="negative" />

If you’d like to set a specific height of the progress bar, add inline styling to the component:

<q-progress
:percentage="progress"
stripe
animate
height="45px"
/>