text: "use strict";(globalThis["webpackChunkquasar_dev"]=globalThis["webpackChunkquasar_dev"]||[]).push([[27693],{27693:(n,a,s)=>{s.r(a),s.d(a,{default:()=>I});var t=s(83673);const o=(0,t.Uk)("The Quasar LoadingBar plugin offers an easy way to set up your app with a "),e=(0,t.Uk)("QAjaxBar"),c=(0,t.Uk)(" in case you don’t want to handle a QAjaxBar component yourself."),p=(0,t._)("p",null,"For a demo, please visit the QAjaxBar documentation page.",-1),l=(0,t.Uk)("LoadingBar options are same as when configuring a "),i=(0,t.Uk)("QAjaxBar"),u=(0,t.Uk)("."),k=(0,t._)("div",{class:"doc-note doc-note--warning"},[(0,t._)("p",{class:"doc-note__title"},"WARNING"),(0,t._)("p",null,[(0,t.Uk)("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 "),(0,t._)("code",{class:"doc-token"},"loadingBar: { skipHijack: true }"),(0,t.Uk)(" (which turns off listening to Ajax traffic).")])],-1),r=(0,t._)("p",null,"Inside Vue components:",-1),_=(0,t._)("pre",{class:"doc-code language-js"},[(0,t._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,t._)("span",{class:"token keyword"},"import"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)(" useQuasar "),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)(),(0,t._)("span",{class:"token keyword"},"from"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'quasar'"),(0,t.Uk)("\n\n"),(0,t._)("span",{class:"token function"},"setup"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token keyword"},"const"),(0,t.Uk)(" $q "),(0,t._)("span",{class:"token operator"},"="),(0,t.Uk)(),(0,t._)("span",{class:"token function"},"useQuasar"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n\n  $q"),(0,t._)("span",{class:"token punctuation"},"."),(0,t.Uk)("loadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"start"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n  $q"),(0,t._)("span",{class:"token punctuation"},"."),(0,t.Uk)("loadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"stop"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n  $q"),(0,t._)("span",{class:"token punctuation"},"."),(0,t.Uk)("loadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"increment"),(0,t._)("span",{class:"token punctuation"},"("),(0,t.Uk)("value"),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n"),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)("\n")])],-1),d=(0,t._)("p",null,"Outside of Vue components:",-1),g=(0,t._)("pre",{class:"doc-code language-js"},[(0,t._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,t._)("span",{class:"token keyword"},"import"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)(" LoadingBar "),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)(),(0,t._)("span",{class:"token keyword"},"from"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'quasar'"),(0,t.Uk)("\n\nLoadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"start"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\nLoadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"stop"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\nLoadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"increment"),(0,t._)("span",{class:"token punctuation"},"("),(0,t.Uk)("value"),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n")])],-1),U=(0,t.Uk)("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 "),f=(0,t._)("code",{class:"doc-token"},"LoadingBar.setDefaults({...})",-1),m=(0,t.Uk)(" or "),y=(0,t._)("code",{class:"doc-token"},"$q.loadingBar.setDefaults({...})",-1),h=(0,t.Uk)(". Supports all "),w=(0,t.Uk)("QAjaxBar"),B=(0,t.Uk)(" properties."),j=(0,t._)("p",null,"Inside Vue components:",-1),b=(0,t._)("pre",{class:"doc-code language-js"},[(0,t._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,t._)("span",{class:"token keyword"},"import"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)(" useQuasar "),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)(),(0,t._)("span",{class:"token keyword"},"from"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'quasar'"),(0,t.Uk)("\n\n"),(0,t._)("span",{class:"token function"},"setup"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token keyword"},"const"),(0,t.Uk)(" $q "),(0,t._)("span",{class:"token operator"},"="),(0,t.Uk)(),(0,t._)("span",{class:"token function"},"useQuasar"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n\n  $q"),(0,t._)("span",{class:"token punctuation"},"."),(0,t.Uk)("loadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"setDefaults"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)("\n    "),(0,t._)("span",{class:"token literal-property property"},"color"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'purple'"),(0,t._)("span",{class:"token punctuation"},","),(0,t.Uk)("\n    "),(0,t._)("span",{class:"token literal-property property"},"size"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'15px'"),(0,t._)("span",{class:"token punctuation"},","),(0,t.Uk)("\n    "),(0,t._)("span",{class:"token literal-property property"},"position"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'bottom'"),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token punctuation"},"}"),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n"),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)("\n")])],-1),v=(0,t._)("p",null,"Outside of Vue components:",-1),L=(0,t._)("pre",{class:"doc-code language-js"},[(0,t._)("code",{class:"doc-code__inner doc-code__inner--prerendered language-js"},[(0,t._)("span",{class:"token keyword"},"import"),(0,t.Uk)(),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)(" LoadingBar "),(0,t._)("span",{class:"token punctuation"},"}"),(0,t.Uk)(),(0,t._)("span",{class:"token keyword"},"from"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'quasar'"),(0,t.Uk)("\n\nLoadingBar"),(0,t._)("span",{class:"token punctuation"},"."),(0,t._)("span",{class:"token function"},"setDefaults"),(0,t._)("span",{class:"token punctuation"},"("),(0,t._)("span",{class:"token punctuation"},"{"),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token literal-property property"},"color"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'purple'"),(0,t._)("span",{class:"token punctuation"},","),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token literal-property property"},"size"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'15px'"),(0,t._)("span",{class:"token punctuation"},","),(0,t.Uk)("\n  "),(0,t._)("span",{class:"token literal-property property"},"position"),(0,t._)("span",{class:"token operator"},":"),(0,t.Uk)(),(0,t._)("span",{class:"token string"},"'bottom'"),(0,t.Uk)("\n"),(0,t._)("span",{class:"token punctuation"},"}"),(0,t._)("span",{class:"token punctuation"},")"),(0,t.Uk)("\n")])],-1);function q(n,a,s,q,x,Q){const A=(0,t.up)("doc-link"),D=(0,t.up)("doc-api"),I=(0,t.up)("doc-installation"),V=(0,t.up)("doc-page");return(0,t.wg)(),(0,t.j4)(V,{"meta-title":q.metaTitle,title:"LoadingBar",related:q.related,toc:q.toc,"meta-desc":q.metaDesc},{default:(0,t.w5)((()=>[(0,t._)("p",null,[o,(0,t.Wm)(A,{to:"/vue-components/ajax-bar"},{default:(0,t.w5)((()=>[e])),_:1}),c]),p,(0,t._)("h2",{id:"loadingbar-api",class:"doc-heading doc-h2",onClick:a[0]||(a[0]=n=>q.copyHeading("loadingbar-api"))},"LoadingBar API"),(0,t.Wm)(D,{file:"LoadingBar"}),(0,t._)("h2",{id:"installation",class:"doc-heading doc-h2",onClick:a[1]||(a[1]=n=>q.copyHeading("installation"))},"Installation"),(0,t.Wm)(I,{plugins:"LoadingBar",config:"loadingBar"}),(0,t._)("p",null,[l,(0,t.Wm)(A,{to:"/vue-components/ajax-bar"},{default:(0,t.w5)((()=>[i])),_:1}),u]),k,(0,t._)("h2",{id:"usage",class:"doc-heading doc-h2",onClick:a[2]||(a[2]=n=>q.copyHeading("usage"))},"Usage"),r,_,d,g,(0,t._)("h3",{id:"setting-up-defaults",class:"doc-heading doc-h3",onClick:a[3]||(a[3]=n=>q.copyHeading("setting-up-defaults"))},"Setting Up Defaults"),(0,t._)("p",null,[U,f,m,y,h,(0,t.Wm)(A,{to:"/vue-components/ajax-bar"},{default:(0,t.w5)((()=>[w])),_:1}),B]),j,b,v,L])),_:1},8,["meta-title","related","toc","meta-desc"])}var x=s(17536);const Q={name:"DocMarkdownPage",setup(){return{metaTitle:"LoadingBar",metaDesc:"A Quasar plugin that wraps the QAjaxBar component for the easiest way of showing such a loading indicator in an app.",related:[{name:"Ajax 状态栏",category:"Vue 组件",path:"/vue-components/ajax-bar"},{name:"线性进度条",category:"Vue 组件",path:"/vue-components/linear-progress"},{name:"骨架屏",category:"Vue 组件",path:"/vue-components/skeleton"}],toc:[{id:"loadingbar-api",title:"LoadingBar API"},{id:"installation",title:"Installation"},{id:"usage",title:"Usage"},{id:"setting-up-defaults",title:"Setting Up Defaults",sub:!0}],copyHeading:x.Et}}};var A=s(74260);const D=(0,A.Z)(Q,[["render",q]]),I=D}}]);