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.
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:
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)
}
})