The Quasar LoadingBar plugin offers an easy way to set up your app with a QAjaxBar in case you don’t want to handle a QAjaxBar component yourself.

For a demo, please visit the QAjaxBar documentation page.

// quasar.config file

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

LoadingBar options are same as when configuring a QAjaxBar.

Usage

Inside Vue components:

import { useQuasar } from 'quasar'

setup () {
 const $q = useQuasar()

 $q.loadingBar.start()
 $q.loadingBar.stop()
 $q.loadingBar.increment(value)
}

Outside of Vue components:

import { LoadingBar } from 'quasar'

LoadingBar.start()
LoadingBar.stop()
LoadingBar.increment(value)

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 file > framework > config > loadingBar: {…} or by calling LoadingBar.setDefaults({...}) or $q.loadingBar.setDefaults({...}). Supports all QAjaxBar properties.

Inside Vue components:

import { useQuasar } from 'quasar'

setup () {
 const $q = useQuasar()

 $q.loadingBar.setDefaults({
 color: 'purple',
 size: '15px',
 position: 'bottom'
 })
}

Outside of Vue components (includes boot files):

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
 color: 'purple',
 size: '15px',
 position: 'bottom'
})

Using an Ajax filter

v2.4.5+

Should you want to trigger LoadingBar only for some URLs, then you can use the setDefaults() method (described above) to configure the hijackFilter property:

import { LoadingBar } from 'quasar'

LoadingBar.setDefaults({
 // return a Boolean which has the meaning of
 // "does this URL should trigger LoadingBar?"
 hijackFilter(url) {
 // example (only https://my-service.com/* should trigger)
 return /^https:\/\/my-service\.com/.test(url)
 }
})