Linear Progress | Quasar Framework

Why donate

API Explorer

How to contribute

Options & Helpers

Style & Identity

Layout and Grid

Vue Directives

Quasar Plugins

Vue Composables

Security

Quasar CLI (with Vite)

Quasar CLI (with Webpack)

Icon Genie CLI

App Extensions

Quasar Utils

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.

Usage

Determined state

Indeterminate state

TIP

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 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

Caught a mistake?Edit this page in browser

1. Introduction

2. QLinearProgress API

3. Usage

3.1. Determined state

3.2. Indeterminate state

3.3. Reversed

3.4. Style

3.5. Buffer

3.6. With a label