DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Use Nuxt.js Loading Progress Bar
Md Aminur Islam
Md Aminur Islam

Posted on

How to Use Nuxt.js Loading Progress Bar

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.

Active & Customize Progress Bar:

You can activate the progress bar on your Nuxt.js application by adding the loading property of the nuxt.config.js inside the export default { //code here } with the corresponding properties.

To set a green progress bar with a height of 5px, add the following code inside your project nuxt.config.js file.

export default {
  loading: {
    color: 'green',
    height: '5px',
    throttle: 0
  }
}
Enter fullscreen mode Exit fullscreen mode

You can customize many things, you can change color(color name/color hex code), height, duration, direction for rtl sites, keep animating progress bar when loading takes longer than duration.

export default {
  loading: {
    color: 'green',
    height: '5px',
    duration: 1000,
    rtl: true,
    continuous: true
  }
}
Enter fullscreen mode Exit fullscreen mode

Disable the Progress Bar:

You 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:

export default {
  loading: false
}
Enter fullscreen mode Exit fullscreen mode

Your can also disable the progress bar for specific page. Add loading: false in the specific page.

<template>
  <h1>Contact Us Page</h1>
</template>

<script>
  export default {
    loading: false
  }
</script>
Enter fullscreen mode Exit fullscreen mode

Custom Loading Progress Bar:

You can also create your own custom loading progress bar. Inside the component directory create your custom component in LoadingBar.vue:

<template>
  <div v-if="loading" class="loading-page">
    <p>Loading...</p>
  </div>
</template>

<script>
  export default {
    data: () => ({
      loading: false
    }),
    methods: {
      start() {
        this.loading = true
      },
      finish() {
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding-top: 200px;
    font-size: 30px;
    font-family: sans-serif;
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Then go to nuxt.config.js file and add your custom loading component to the loading property.

export default {
  loading: '~/components/LoadingBar.vue'
}
Enter fullscreen mode Exit fullscreen mode

It’s very simple, right? Now you can see your own custom loading bar between routes changing.

Useful Links:

Top comments (1)

Collapse
 
harshadsatra profile image
Harshad

Hey,

Is there a way I can get the Loading Percentage on the loadingBar Component?

Regex for lazy developers

regex for lazy devs

You know who you are. Sorry for the callout πŸ˜†