Loading Plugin

Loading is a feature that you can use to display an overlay with a spinner on top of your App’s content to inform the user that a background operation is taking place. No need to add complex logic within your Pages for global background operations.

Loading API

Loading API...

Installation


// quasar.config.js

return {
  framework: {
    plugins: [
      'Loading'
    ],
    config: {
      loading: { /* look at QuasarConfOptions from the API card */ }
    }
  }
}

Usage

Loading uses a delay (500ms) to display itself so that quick operations won’t make the screen flicker. This happens by showing and then quickly hiding the progress spinner without the user having a chance to see what happens. The delay before showing it eliminates confusion.

Inside a Vue component:

import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  $q.loading.show({
    delay: 400 // ms
  })

  $q.loading.hide()
}

Outside of a Vue component:

import {
  Loading,

  // optional!, for example below
  // with custom spinner
  QSpinnerGears
} from 'quasar'

// default options
Loading.show()

// fully customizable
Loading.show({
  spinner: QSpinnerGears,
  // other props
})

Loading.hide()
Default options



With message



With customized box



With unsafe message, but sanitized



Customized



Show and Change



Setting Up Defaults

Should you wish to set up some defaults, rather than specifying them each time, you can do so by using quasar.config.js > framework > config > loading: {…} or by calling Loading.setDefaults({...}) or $q.loading.setDefaults({...}).