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.
LoadingBar API
Installation
// quasar.conf.js
return {
framework: {
plugins: [
'LoadingBar'
],
config: {
loadingBar: { /* look at QUASARCONFOPTIONS from the API card (bottom of page) */ }
}
}
}
LoadingBar options are same as when configuring a QAjaxBar.
WARNING
When using the UMD version of Quasar, all components, directives and plugins are installed by default. This includes LoadingBar. Should you wish to disable it, specify loadingBar: { skipHijack: true }
(which turns off listening to Ajax traffic).
Usage
Inside Vue components:
this.$q.loadingBar.start()
this.$q.loadingBar.stop()
this.$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.conf.js > framework > config > loadingBar: {…} or by calling LoadingBar.setDefaults({...})
or this.$q.loadingBar.setDefaults({...})
. Supports all QAjaxBar properties.
Inside Vue components:
this.$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 v1.17.2+
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
// "should this URL trigger LoadingBar?"
hijackFilter (url) {
// example (only https://my-service.com/* should trigger)
return /^https:\/\/my-service\.com/.test(url)
}
})