[{"data":1,"prerenderedAt":701},["ShallowReactive",2],{"blog-article-/blog/nuxt-loading-progress-bar":3,"blog-surround-/blog/nuxt-loading-progress-bar":692},{"id":4,"title":5,"body":6,"canonical":679,"date":680,"description":12,"extension":681,"featured":682,"image":683,"meta":684,"navigation":219,"ogImage":679,"path":685,"provider":686,"published":682,"seo":687,"stem":688,"tags":689,"url":679,"__hash__":691},"blog/blog/nuxt-loading-progress-bar.md","The Nuxt Loading Progress Bar",{"type":7,"value":8,"toc":677},"minimark",[9,13,16,70,73,141,144,169,172,259,262,644,647,671,674],[10,11,12],"p",{},"Nuxt.js automatically gives you a loading progress bar component which is shown between routes. Did you know you can customise it, disable it or create your own component?",[10,14,15],{},"To change the colour for example all you have to do is add the colour you want to the loading property in your nuxt.config.js file.",[17,18,23],"pre",{"className":19,"code":20,"language":21,"meta":22,"style":22},"language-javascript shiki shiki-themes github-light github-dark","export default {\n  loading: {\n    color: 'blue'\n  }\n}\n","javascript","",[24,25,26,42,48,58,64],"code",{"__ignoreMap":22},[27,28,31,35,38],"span",{"class":29,"line":30},"line",1,[27,32,34],{"class":33},"szBVR","export",[27,36,37],{"class":33}," default",[27,39,41],{"class":40},"sVt8B"," {\n",[27,43,45],{"class":29,"line":44},2,[27,46,47],{"class":40},"  loading: {\n",[27,49,51,54],{"class":29,"line":50},3,[27,52,53],{"class":40},"    color: ",[27,55,57],{"class":56},"sZZnC","'blue'\n",[27,59,61],{"class":29,"line":60},4,[27,62,63],{"class":40},"  }\n",[27,65,67],{"class":29,"line":66},5,[27,68,69],{"class":40},"}\n",[10,71,72],{},"There are many other things you can change such as the height, the duration, the direction for rtl sites and if it should keep animating the progress bar when loading takes longer than the duration.",[17,74,76],{"className":19,"code":75,"language":21,"meta":22,"style":22},"export default {\n  loading: {\n    height: '10px',\n    duration: 1000,\n    rtl: true,\n    continuous: true\n  }\n}\n",[24,77,78,86,90,101,112,122,131,136],{"__ignoreMap":22},[27,79,80,82,84],{"class":29,"line":30},[27,81,34],{"class":33},[27,83,37],{"class":33},[27,85,41],{"class":40},[27,87,88],{"class":29,"line":44},[27,89,47],{"class":40},[27,91,92,95,98],{"class":29,"line":50},[27,93,94],{"class":40},"    height: ",[27,96,97],{"class":56},"'10px'",[27,99,100],{"class":40},",\n",[27,102,103,106,110],{"class":29,"line":60},[27,104,105],{"class":40},"    duration: ",[27,107,109],{"class":108},"sj4cs","1000",[27,111,100],{"class":40},[27,113,114,117,120],{"class":29,"line":66},[27,115,116],{"class":40},"    rtl: ",[27,118,119],{"class":108},"true",[27,121,100],{"class":40},[27,123,125,128],{"class":29,"line":124},6,[27,126,127],{"class":40},"    continuous: ",[27,129,130],{"class":108},"true\n",[27,132,134],{"class":29,"line":133},7,[27,135,63],{"class":40},[27,137,139],{"class":29,"line":138},8,[27,140,69],{"class":40},[10,142,143],{},"If you don't like the progress bar at all you can disable it completely in the nuxt.config.js",[17,145,147],{"className":19,"code":146,"language":21,"meta":22,"style":22},"export default {\n  loading: false\n}\n",[24,148,149,157,165],{"__ignoreMap":22},[27,150,151,153,155],{"class":29,"line":30},[27,152,34],{"class":33},[27,154,37],{"class":33},[27,156,41],{"class":40},[27,158,159,162],{"class":29,"line":44},[27,160,161],{"class":40},"  loading: ",[27,163,164],{"class":108},"false\n",[27,166,167],{"class":29,"line":50},[27,168,69],{"class":40},[10,170,171],{},"You can also disable it for a specific page.",[17,173,177],{"className":174,"code":175,"language":176,"meta":22,"style":22},"language-html shiki shiki-themes github-light github-dark","\u003Ctemplate>\n  \u003Ch1>About Page\u003C/h1>\n\u003C/template>\n\n\u003Cscript>\n  export default {\n    loading: false\n  }\n\u003C/script>\n","html",[24,178,179,191,206,215,221,230,239,246,250],{"__ignoreMap":22},[27,180,181,184,188],{"class":29,"line":30},[27,182,183],{"class":40},"\u003C",[27,185,187],{"class":186},"s9eBZ","template",[27,189,190],{"class":40},">\n",[27,192,193,196,199,202,204],{"class":29,"line":44},[27,194,195],{"class":40},"  \u003C",[27,197,198],{"class":186},"h1",[27,200,201],{"class":40},">About Page\u003C/",[27,203,198],{"class":186},[27,205,190],{"class":40},[27,207,208,211,213],{"class":29,"line":50},[27,209,210],{"class":40},"\u003C/",[27,212,187],{"class":186},[27,214,190],{"class":40},[27,216,217],{"class":29,"line":60},[27,218,220],{"emptyLinePlaceholder":219},true,"\n",[27,222,223,225,228],{"class":29,"line":66},[27,224,183],{"class":40},[27,226,227],{"class":186},"script",[27,229,190],{"class":40},[27,231,232,235,237],{"class":29,"line":124},[27,233,234],{"class":33},"  export",[27,236,37],{"class":33},[27,238,41],{"class":40},[27,240,241,244],{"class":29,"line":133},[27,242,243],{"class":40},"    loading: ",[27,245,164],{"class":108},[27,247,248],{"class":29,"line":138},[27,249,63],{"class":40},[27,251,253,255,257],{"class":29,"line":252},9,[27,254,210],{"class":40},[27,256,227],{"class":186},[27,258,190],{"class":40},[10,260,261],{},"And if you want to show loading but don't like the default loading component you can of course create your own. In the components folder create a component called loading.vue.",[17,263,265],{"className":174,"code":264,"language":176,"meta":22,"style":22},"\u003Ctemplate>\n  \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n    \u003Cp>Loading...\u003C/p>\n  \u003C/div>\n\u003C/template>\n\u003Cscript>\n  export default {\n    data: () => ({\n      loading: false\n    }),\n    methods: {\n      start() {\n        this.loading = true\n      },\n      finish() {\n        this.loading = false\n      }\n    }\n  }\n\u003C/script>\n\u003Cstyle scoped>\n  .loading-page {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: yellowgreen;\n    text-align: center;\n    padding-top: 100px;\n    color: red;\n    font-size: 80px;\n    font-family: sans-serif;\n  }\n\u003C/style>\n",[24,266,267,275,302,316,325,333,341,349,363,370,376,382,391,405,411,419,431,437,443,448,457,470,478,493,506,518,534,548,561,574,589,602,617,630,635],{"__ignoreMap":22},[27,268,269,271,273],{"class":29,"line":30},[27,270,183],{"class":40},[27,272,187],{"class":186},[27,274,190],{"class":40},[27,276,277,279,282,286,289,292,295,297,300],{"class":29,"line":44},[27,278,195],{"class":40},[27,280,281],{"class":186},"div",[27,283,285],{"class":284},"sScJk"," v-if",[27,287,288],{"class":40},"=",[27,290,291],{"class":56},"\"loading\"",[27,293,294],{"class":284}," class",[27,296,288],{"class":40},[27,298,299],{"class":56},"\"loading-page\"",[27,301,190],{"class":40},[27,303,304,307,309,312,314],{"class":29,"line":50},[27,305,306],{"class":40},"    \u003C",[27,308,10],{"class":186},[27,310,311],{"class":40},">Loading...\u003C/",[27,313,10],{"class":186},[27,315,190],{"class":40},[27,317,318,321,323],{"class":29,"line":60},[27,319,320],{"class":40},"  \u003C/",[27,322,281],{"class":186},[27,324,190],{"class":40},[27,326,327,329,331],{"class":29,"line":66},[27,328,210],{"class":40},[27,330,187],{"class":186},[27,332,190],{"class":40},[27,334,335,337,339],{"class":29,"line":124},[27,336,183],{"class":40},[27,338,227],{"class":186},[27,340,190],{"class":40},[27,342,343,345,347],{"class":29,"line":133},[27,344,234],{"class":33},[27,346,37],{"class":33},[27,348,41],{"class":40},[27,350,351,354,357,360],{"class":29,"line":138},[27,352,353],{"class":284},"    data",[27,355,356],{"class":40},": () ",[27,358,359],{"class":33},"=>",[27,361,362],{"class":40}," ({\n",[27,364,365,368],{"class":29,"line":252},[27,366,367],{"class":40},"      loading: ",[27,369,164],{"class":108},[27,371,373],{"class":29,"line":372},10,[27,374,375],{"class":40},"    }),\n",[27,377,379],{"class":29,"line":378},11,[27,380,381],{"class":40},"    methods: {\n",[27,383,385,388],{"class":29,"line":384},12,[27,386,387],{"class":284},"      start",[27,389,390],{"class":40},"() {\n",[27,392,394,397,400,402],{"class":29,"line":393},13,[27,395,396],{"class":108},"        this",[27,398,399],{"class":40},".loading ",[27,401,288],{"class":33},[27,403,404],{"class":108}," true\n",[27,406,408],{"class":29,"line":407},14,[27,409,410],{"class":40},"      },\n",[27,412,414,417],{"class":29,"line":413},15,[27,415,416],{"class":284},"      finish",[27,418,390],{"class":40},[27,420,422,424,426,428],{"class":29,"line":421},16,[27,423,396],{"class":108},[27,425,399],{"class":40},[27,427,288],{"class":33},[27,429,430],{"class":108}," false\n",[27,432,434],{"class":29,"line":433},17,[27,435,436],{"class":40},"      }\n",[27,438,440],{"class":29,"line":439},18,[27,441,442],{"class":40},"    }\n",[27,444,446],{"class":29,"line":445},19,[27,447,63],{"class":40},[27,449,451,453,455],{"class":29,"line":450},20,[27,452,210],{"class":40},[27,454,227],{"class":186},[27,456,190],{"class":40},[27,458,460,462,465,468],{"class":29,"line":459},21,[27,461,183],{"class":40},[27,463,464],{"class":186},"style",[27,466,467],{"class":284}," scoped",[27,469,190],{"class":40},[27,471,473,476],{"class":29,"line":472},22,[27,474,475],{"class":284},"  .loading-page",[27,477,41],{"class":40},[27,479,481,484,487,490],{"class":29,"line":480},23,[27,482,483],{"class":108},"    position",[27,485,486],{"class":40},": ",[27,488,489],{"class":108},"fixed",[27,491,492],{"class":40},";\n",[27,494,496,499,501,504],{"class":29,"line":495},24,[27,497,498],{"class":108},"    top",[27,500,486],{"class":40},[27,502,503],{"class":108},"0",[27,505,492],{"class":40},[27,507,509,512,514,516],{"class":29,"line":508},25,[27,510,511],{"class":108},"    left",[27,513,486],{"class":40},[27,515,503],{"class":108},[27,517,492],{"class":40},[27,519,521,524,526,529,532],{"class":29,"line":520},26,[27,522,523],{"class":108},"    width",[27,525,486],{"class":40},[27,527,528],{"class":108},"100",[27,530,531],{"class":33},"%",[27,533,492],{"class":40},[27,535,537,540,542,544,546],{"class":29,"line":536},27,[27,538,539],{"class":108},"    height",[27,541,486],{"class":40},[27,543,528],{"class":108},[27,545,531],{"class":33},[27,547,492],{"class":40},[27,549,551,554,556,559],{"class":29,"line":550},28,[27,552,553],{"class":108},"    background",[27,555,486],{"class":40},[27,557,558],{"class":108},"yellowgreen",[27,560,492],{"class":40},[27,562,564,567,569,572],{"class":29,"line":563},29,[27,565,566],{"class":108},"    text-align",[27,568,486],{"class":40},[27,570,571],{"class":108},"center",[27,573,492],{"class":40},[27,575,577,580,582,584,587],{"class":29,"line":576},30,[27,578,579],{"class":108},"    padding-top",[27,581,486],{"class":40},[27,583,528],{"class":108},[27,585,586],{"class":33},"px",[27,588,492],{"class":40},[27,590,592,595,597,600],{"class":29,"line":591},31,[27,593,594],{"class":108},"    color",[27,596,486],{"class":40},[27,598,599],{"class":108},"red",[27,601,492],{"class":40},[27,603,605,608,610,613,615],{"class":29,"line":604},32,[27,606,607],{"class":108},"    font-size",[27,609,486],{"class":40},[27,611,612],{"class":108},"80",[27,614,586],{"class":33},[27,616,492],{"class":40},[27,618,620,623,625,628],{"class":29,"line":619},33,[27,621,622],{"class":108},"    font-family",[27,624,486],{"class":40},[27,626,627],{"class":108},"sans-serif",[27,629,492],{"class":40},[27,631,633],{"class":29,"line":632},34,[27,634,63],{"class":40},[27,636,638,640,642],{"class":29,"line":637},35,[27,639,210],{"class":40},[27,641,464],{"class":186},[27,643,190],{"class":40},[10,645,646],{},"Then in the nuxt.config.js file add the component to the loading property.",[17,648,650],{"className":19,"code":649,"language":21,"meta":22,"style":22},"export default {\n  loading: '~/components/loading.vue'\n}\n",[24,651,652,660,667],{"__ignoreMap":22},[27,653,654,656,658],{"class":29,"line":30},[27,655,34],{"class":33},[27,657,37],{"class":33},[27,659,41],{"class":40},[27,661,662,664],{"class":29,"line":44},[27,663,161],{"class":40},[27,665,666],{"class":56},"'~/components/loading.vue'\n",[27,668,669],{"class":29,"line":50},[27,670,69],{"class":40},[10,672,673],{},"And that's it you now have your own custom loading component for when changing routes and your content is loading.",[464,675,676],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":22,"searchDepth":44,"depth":44,"links":678},[],null,"2020-04-17","md",false,"photo-1516906158245-7fafb29df119?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop",{},"/blog/nuxt-loading-progress-bar","imgix",{"title":5,"description":12},"blog/nuxt-loading-progress-bar",[690],"nuxt","qnN9RVSZxDcWQkY6oIFeZOB1cyXXMDM4p_XSj_yLa-g",[693,697],{"title":694,"path":695,"stem":696,"children":-1},"Show a message when your user is offline with $nuxt.isOffline","/blog/nuxt-show-message-when-offline","blog/nuxt-show-message-when-offline",{"title":698,"path":699,"stem":700,"children":-1},"Let's Analyze your webpack bundles with Nuxt","/blog/nuxt-analyze-webpack-bundles","blog/nuxt-analyze-webpack-bundles",1790839748368]