[{"data":1,"prerenderedAt":129},["ShallowReactive",2],{"$fGyGQ3jyVRyUGnJJL7DdphpZIGthDX5FUajL7Apkb5vA":3,"post-tags-how-to-use-nuxt-js-loading-progress-bar":87},[4],{"id":5,"date":6,"date_gmt":6,"guid":7,"modified":6,"modified_gmt":6,"slug":9,"status":10,"type":11,"link":8,"title":12,"content":14,"excerpt":17,"author":19,"featured_media":20,"comment_status":21,"ping_status":21,"sticky":16,"template":22,"format":23,"meta":24,"categories":25,"tags":26,"class_list":29,"post_image_original":39,"devto_meta":40,"_links":46},54,"2021-05-31T09:31:46",{"rendered":8},"https:\u002F\u002Flab.aiarnob.com\u002Fhow-to-use-nuxt-js-loading-progress-bar\u002F","how-to-use-nuxt-js-loading-progress-bar","publish","post",{"rendered":13},"How to Use Nuxt.js Loading Progress Bar",{"rendered":15,"protected":16},"\u003Cp>Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that’s shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own \u003Cstrong>loading\u003C\u002Fstrong> progress bar.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"active-amp-customize-progress-bar\" href=\"#active-amp-customize-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Active & Customize Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can activate the progress bar on your Nuxt.js application by adding the \u003Cstrong>loading\u003C\u002Fstrong> property of the \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> inside the \u003Ccode>export default { \u002F\u002Fcode here }\u003C\u002Fcode> with the corresponding properties.\u003C\u002Fp>\n\u003Cp>To set a green progress bar with a height of 5px, add the following code inside your project \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">color\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">green\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">5px\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">throttle\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>You can customize many things, you can change color(color name\u002Fcolor hex code), height, duration, direction for \u003Cstrong>rtl\u003C\u002Fstrong> sites, keep animating progress bar when loading takes longer than duration.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">color\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">green\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">5px\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">duration\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">1000\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">rtl\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan>\n    \u003Cspan class=\"na\">continuous\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"disable-the-progress-bar\" href=\"#disable-the-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Disable the Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can disable the progress bar globally or locally. If you want to disable the progress bar globally then add \u003Cstrong>loading: false\u003C\u002Fstrong> in your \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Your can also disable the progress bar for specific page.  Add \u003Cstrong>loading: false\u003C\u002Fstrong> in the specific page.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">h1\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"nx\">Contact\u003C\u002Fspan> \u003Cspan class=\"nx\">Us\u003C\u002Fspan> \u003Cspan class=\"nx\">Page\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fh1\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Ch2>\n  \u003Ca name=\"custom-loading-progress-bar\" href=\"#custom-loading-progress-bar\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Custom Loading Progress Bar:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cp>You can also create your own custom loading progress bar. Inside the component directory create your custom component in \u003Cstrong>LoadingBar.vue\u003C\u002Fstrong>:\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">template\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">div\u003C\u002Fspan> \u003Cspan class=\"nx\">v\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"k\">if\u003C\u002Fspan>\u003Cspan class=\"o\">=\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"s2\">loading\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan> \u003Cspan class=\"kd\">class\u003C\u002Fspan>\u003Cspan class=\"o\">=\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"s2\">loading-page\u003C\u002Fspan>\u003Cspan class=\"dl\">\"\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n    \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">p\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\u003Cspan class=\"nx\">Loading\u003C\u002Fspan>\u003Cspan class=\"p\">...\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fp\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>  \u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fdiv\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Ftemplate\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">script\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"na\">data\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"o\">=>\u003C\u002Fspan> \u003Cspan class=\"p\">({\u003C\u002Fspan>\n      \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}),\u003C\u002Fspan>\n    \u003Cspan class=\"na\">methods\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n      \u003Cspan class=\"nf\">start\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"kc\">true\u003C\u002Fspan>\n      \u003Cspan class=\"p\">},\u003C\u002Fspan>\n      \u003Cspan class=\"nf\">finish\u003C\u002Fspan>\u003Cspan class=\"p\">()\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n        \u003Cspan class=\"k\">this\u003C\u002Fspan>\u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan> \u003Cspan class=\"o\">=\u003C\u002Fspan> \u003Cspan class=\"kc\">false\u003C\u002Fspan>\n      \u003Cspan class=\"p\">}\u003C\u002Fspan>\n    \u003Cspan class=\"p\">}\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fscript\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"nx\">style\u003C\u002Fspan> \u003Cspan class=\"nx\">scoped\u003C\u002Fspan>\u003Cspan class=\"o\">>\u003C\u002Fspan>\n  \u003Cspan class=\"p\">.\u003C\u002Fspan>\u003Cspan class=\"nx\">loading\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">page\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">position\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">fixed\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">top\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">left\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">0\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">width\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">100\u003C\u002Fspan>\u003Cspan class=\"o\">%\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">height\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">100\u003C\u002Fspan>\u003Cspan class=\"o\">%\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nl\">background\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nf\">rgba\u003C\u002Fspan>\u003Cspan class=\"p\">(\u003C\u002Fspan>\u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mi\">255\u003C\u002Fspan>\u003Cspan class=\"p\">,\u003C\u002Fspan> \u003Cspan class=\"mf\">0.8\u003C\u002Fspan>\u003Cspan class=\"p\">);\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">text\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">align\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">center\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">padding\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">top\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">200\u003C\u002Fspan>\u003Cspan class=\"nx\">px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">font\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">size\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"mi\">30\u003C\u002Fspan>\u003Cspan class=\"nx\">px\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n    \u003Cspan class=\"nx\">font\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">family\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"nx\">sans\u003C\u002Fspan>\u003Cspan class=\"o\">-\u003C\u002Fspan>\u003Cspan class=\"nx\">serif\u003C\u002Fspan>\u003Cspan class=\"p\">;\u003C\u002Fspan>\n  \u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003Cspan class=\"o\"><\u003C\u002Fspan>\u003Cspan class=\"sr\">\u002Fstyle\u003C\u002Fspan>\u003Cspan class=\"err\">>\n\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>Then go to \u003Cstrong>nuxt.config.js\u003C\u002Fstrong> file and add your custom loading component to the \u003Cstrong>loading\u003C\u002Fstrong> property.\n\u003C\u002Fp>\n\u003Cdiv class=\"highlight js-code-highlight\">\n\u003Cpre class=\"highlight javascript\">\u003Ccode>\u003Cspan class=\"k\">export\u003C\u002Fspan> \u003Cspan class=\"k\">default\u003C\u002Fspan> \u003Cspan class=\"p\">{\u003C\u002Fspan>\n  \u003Cspan class=\"na\">loading\u003C\u002Fspan>\u003Cspan class=\"p\">:\u003C\u002Fspan> \u003Cspan class=\"dl\">'\u003C\u002Fspan>\u003Cspan class=\"s1\">~\u002Fcomponents\u002FLoadingBar.vue\u003C\u002Fspan>\u003Cspan class=\"dl\">'\u003C\u002Fspan>\n\u003Cspan class=\"p\">}\u003C\u002Fspan>\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cdiv class=\"highlight__panel js-actions-panel\">\n\u003Cdiv class=\"highlight__panel-action js-fullscreen-code-action\">\n    \u003Ctitle>Enter fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003Cp>    \u003Ctitle>Exit fullscreen mode\u003C\u002Ftitle>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cp>It’s very simple, right? Now you can see your own custom loading bar between routes changing.\u003C\u002Fp>\n\u003Ch2>\n  \u003Ca name=\"useful-links\" href=\"#useful-links\">\u003Cbr \u002F>\n  \u003C\u002Fa>\u003Cbr \u002F>\n  Useful Links:\u003Cbr \u002F>\n\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Nuxt \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Floading\" target=\"_blank\" rel=\"noopener noreferrer\">Loading Docs.\u003C\u002Fa>\n\u003C\u002Fli>\n\u003Cli>Custom loading component \u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002Fexamples\u002Fcustom-loading-component\" target=\"_blank\" rel=\"noopener noreferrer\">example.\u003C\u002Fa>\n\u003C\u002Fli>\n\u003C\u002Ful>\n",false,{"rendered":18,"protected":16},"\u003Cp>Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nux…\u003C\u002Fp>\n",1,55,"open","","standard",{"footnotes":22},[19],[27,28],25,32,[30,11,31,32,33,34,35,36,37,38],"post-54","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-javascript","tag-vue","https:\u002F\u002Flab.aiarnob.com\u002Fwp-content\u002Fuploads\u002F2021\u002F05\u002Fdevto-713175-cover.webp",{"edited_at":41,"published_at":42,"reactions":43,"comments":19,"reading_time":44,"body_markdown":45},null,"2021-05-31T09:31:46Z",8,2,"Are you using Nuxt.js on your current project as front-end framework? then you have a great news, Nuxt.js Out of the box gives you its own loading progress bar component that's shown between routes. You can do anything with the Nuxt.js loading progress bar, customize it, disable it, or can create your own **loading** progress bar.\n\n## Active & Customize Progress Bar:\nYou can activate the progress bar on your Nuxt.js application by adding the **loading** property of the **nuxt.config.js** inside the `export default { \u002F\u002Fcode here }` with the corresponding properties.\n\nTo set a green progress bar with a height of 5px, add the following code inside your project **nuxt.config.js** file.\n\n```javascript\nexport default {\n  loading: {\n    color: 'green',\n    height: '5px',\n    throttle: 0\n  }\n}\n```\nYou can customize many things, you can change color(color name\u002Fcolor hex code), height, duration, direction for **rtl** sites, keep animating progress bar when loading takes longer than duration.\n\n```javascript\nexport default {\n  loading: {\n    color: 'green',\n    height: '5px',\n    duration: 1000,\n    rtl: true,\n    continuous: true\n  }\n}\n```\n\n## Disable the Progress Bar:\nYou can disable the progress bar globally or locally. If you want to disable the progress bar globally then add **loading: false** in your **nuxt.config.js** file:\n```javascript\nexport default {\n  loading: false\n}\n```\n\nYour can also disable the progress bar for specific page.  Add **loading: false** in the specific page.\n```javascript\n\u003Ctemplate>\n  \u003Ch1>Contact Us Page\u003C\u002Fh1>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    loading: false\n  }\n\u003C\u002Fscript>\n```\n\n##Custom Loading Progress Bar:\nYou can also create your own custom loading progress bar. Inside the component directory create your custom component in **LoadingBar.vue**:\n```javascript\n\u003Ctemplate>\n  \u003Cdiv v-if=\"loading\" class=\"loading-page\">\n    \u003Cp>Loading...\u003C\u002Fp>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\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\u002Fscript>\n\n\u003Cstyle scoped>\n  .loading-page {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(255, 255, 255, 0.8);\n    text-align: center;\n    padding-top: 200px;\n    font-size: 30px;\n    font-family: sans-serif;\n  }\n\u003C\u002Fstyle>\n```\n\nThen go to **nuxt.config.js** file and add your custom loading component to the **loading** property.\n```javascript\nexport default {\n  loading: '~\u002Fcomponents\u002FLoadingBar.vue'\n}\n```\nIt’s very simple, right? Now you can see your own custom loading bar between routes changing.\n\n##Useful Links:\n* Nuxt [Loading Docs.](https:\u002F\u002Fnuxtjs.org\u002Fdocs\u002F2.x\u002Ffeatures\u002Floading)\n* Custom loading component [example.](https:\u002F\u002Fnuxtjs.org\u002Fexamples\u002Fcustom-loading-component)",{"self":47,"collection":53,"about":56,"author":59,"replies":63,"version-history":66,"wp:featuredmedia":70,"wp:attachment":73,"wp:term":76,"curies":83},[48],{"href":49,"targetHints":50},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F54",{"allow":51},[52],"GET",[54],{"href":55},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts",[57],{"href":58},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftypes\u002Fpost",[60],{"embeddable":61,"href":62},true,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fusers\u002F1",[64],{"embeddable":61,"href":65},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcomments?post=54",[67],{"count":68,"href":69},0,"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts\u002F54\u002Frevisions",[71],{"embeddable":61,"href":72},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia\u002F55",[74],{"href":75},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fmedia?parent=54",[77,80],{"taxonomy":78,"embeddable":61,"href":79},"category","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fcategories?post=54",{"taxonomy":81,"embeddable":61,"href":82},"post_tag","https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags?post=54",[84],{"name":85,"href":86,"templated":61},"wp","https:\u002F\u002Fapi.w.org\u002F{rel}",[88,110],{"id":27,"count":89,"description":22,"link":90,"name":91,"slug":91,"taxonomy":81,"meta":92,"_links":93},3,"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fjavascript\u002F","javascript",[],{"self":94,"collection":99,"about":102,"wp:post_type":105,"curies":108},[95],{"href":96,"targetHints":97},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F25",{"allow":98},[52],[100],{"href":101},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags",[103],{"href":104},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftaxonomies\u002Fpost_tag",[106],{"href":107},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=25",[109],{"name":85,"href":86,"templated":61},{"id":28,"count":44,"description":22,"link":111,"name":112,"slug":112,"taxonomy":81,"meta":113,"_links":114},"https:\u002F\u002Flab.aiarnob.com\u002Ftag\u002Fvue\u002F","vue",[],{"self":115,"collection":120,"about":122,"wp:post_type":124,"curies":127},[116],{"href":117,"targetHints":118},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Ftags\u002F32",{"allow":119},[52],[121],{"href":101},[123],{"href":104},[125],{"href":126},"https:\u002F\u002Flab.aiarnob.com\u002Fwp-json\u002Fwp\u002Fv2\u002Fposts?tags=32",[128],{"name":85,"href":86,"templated":61},1781010865353]