Circular Progress

The QCircularProgress component displays a colored circular progress. 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: [
      'QCircularProgress'
    ]
  }
}

Usage

By default, QCircularProgress inherits current text color (as arc progress color and inner label color) and current font size (as component size). For customization, you can use the size and color related props.

Determined state



Determinate and reverse



Offset angle



Custom min/max (same model)



In the example below, show-value property also enables the default slot, so you can fill it with custom content, like even a QAvatar or a QTooltip. The font-size prop refers to the inner label font size.

Show value



Indeterminate state



Standard sizes



QCircularProgress API