Progress Bar     

A Progress bar is used to show a user how far along he/she is in a process.

Basic usage

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

Vue Properties

percentageNumberProgress (in percentage).
bufferNumber(Optional) Buffer (in percentage).

Percentage and buffer must obviously 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 interval.


Configure how your progress bar is shown. Add one of these CSS classes:

CSS ClassDescription
indeterminateMake its state as indeterminate.
stripeMake it striped. Optionally use in conjunction with animate
animateWorks only along stripe. It makes a nice animated stripe.

For color, use one of the main colors. See API > CSS > Color Palette.


<q-progress :percentage="progress" class="positive"></q-progress>
<q-progress :percentage="progress" class="info"></q-progress>
<q-progress :percentage="progress" class="warning"></q-progress>
<q-progress :percentage="progress" class="secondary"></q-progress>
<q-progress :percentage="progress" class="tertiary"></q-progress>
<q-progress :percentage="progress" class="dark"></q-progress>
<q-progress :percentage="progress" class="orange"></q-progress>
<q-progress :percentage="progress" class="red"></q-progress>
<q-progress :percentage="progress" class="light-blue"></q-progress>

Specific height:

style="height: 45px"
class="indeterminate stripe"