DEV Community

StuartCreed
StuartCreed

Posted on

A good progress bar package

A neat js progress bar package:

https://www.npmjs.com/package/nprogress

For an example of use with VueJS and axios interceptors see https://www.vuemastery.com/courses/next-level-vue/progress-bar-axios-interceptors. Note: this is a part of a paid course.

It uses axios interceptors as a middleware for invoking the loading bar e.g:

import axios from 'axios'
import NProgress from 'nprogress' // <--- Import the library

    const apiClient = axios.create({ ... })

    apiClient.interceptors.request.use(config => { // Called on request
      NProgress.start()
      return config
    })
    apiClient.interceptors.response.use(response => { // Called on response
      NProgress.done()
      return response
    })
Enter fullscreen mode Exit fullscreen mode

Discussion (0)