How to use the nprogress.configure function in nprogress

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (to.path.indexOf('/') !== -1) {
    if (hasToken) {
      if (to.path === '/login') {

componentDidMount() {
    const { store } = this.context;

    // NOTE: react-redux v6.0.0 introduced a breaking change that breaks the use of React context's legacy API:
    // See: https://github.com/reduxjs/react-redux/releases/tag/v6.0.0:
    // Passing store as a prop to a connected component is no longer supported.
    if (!store) {
      this.disposeStoreSubscription = () => {};
      return;
    }

    const { config } = this.props;
    this.previousPendingTasks = store.getState().pendingTasks;
    NProgress.configure(config);
    this.disposeStoreSubscription = store.subscribe(() => {
      const diff = store.getState().pendingTasks - this.previousPendingTasks;
      if (diff > 0) {
        NProgress.start();
      }
      if (diff < 0) {
        NProgress.inc();
      }
      if (store.getState().pendingTasks === 0) {
        NProgress.done();
      }
      this.previousPendingTasks = store.getState().pendingTasks;
    });
  }

import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie

NProgress.configure({ showSpinner: false })// NProgress Configuration

// permissiom judge function
function hasPermission(roles, permissionRoles) {
  if (roles.indexOf('ROLE_ADMIN') >= 0) return true // admin permission passed directly
  if (!permissionRoles) return true
  return roles.some(role => permissionRoles.indexOf(role) >= 0)
}

const whiteList = ['/login']// no redirect whitelist

router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
  if (getToken()) { // determine if there has token
    /* has token*/
    if (to.path === '/login') {
      next({ path: '/' })

mounted () {
    // configure progress bar
    nprogress.configure({ showSpinner: false })

    this.$router.beforeEach((to, from, next) => {
      if (to.path !== from.path && !Vue.component(to.name)) {
        nprogress.start()
      }
      next()
    })

    this.$router.afterEach((to, from) => {
      nprogress.done()
      this.isSidebarOpen = false
      this.isApiSidebarOpen = false
    })

    window.addEventListener('scroll', this.onScroll)

export const loadEvent = async (id, full = false) => {
  nprogress.configure({ showSpinner: false });
  const urlToFecth = (full) ? `/api/events/getFull/${id}` : `/api/events/${id}`;
  nprogress.start();
  try {
    let response = await fetch(urlToFecth, { credentials: 'same-origin' });
    response = checkStatus(response);
    const event = await parseJSON(response);
    return event;
  } catch (err) {
    console.error('err at loadEvent EventDetail', err);
    return null;
  } finally {
    nprogress.done();
  }
};

import $ from 'jquery';
import _ from 'lodash';
import Radio from 'backbone.radio';
import nprogress from 'nprogress';
import {Application} from 'backbone.marionette';
import LayoutView from './layout-view';

let routerChannel = Radio.channel('router');

nprogress.configure({
  showSpinner: false
});

export default Application.extend({
  initialize() {
    this.$body = $(document.body);
    this.layout = new LayoutView();
    this.layout.render();

    this.listenTo(routerChannel, {
      'before:enter:route' : this.onBeforeEnterRoute,
      'enter:route'        : this.onEnterRoute,
      'error:route'        : this.onErrorRoute
    });
  },

function start() {
  if (firstRoute) {
    firstRoute = false;
    nprogress.configure({
      showSpinner: false,
    });
  } else {
    nprogress.start();
  }
}

okText: 'Reload',
      onOk: () => window.location.reload(),
    })
    removeSpinner()
    return
  }

  if (info?.enable_telemetry) {
    initSentryRoutingInstrument()
    const instance = client.getAxiosInstance()
    applySentryTracingInterceptor(instance)
  }

  const registry = new AppRegistry(options)

  NProgress.configure({
    showSpinner: false,
  })
  window.addEventListener('single-spa:before-routing-event', () => {
    NProgress.set(0.2)
  })
  window.addEventListener('single-spa:routing-event', () => {
    NProgress.done(true)
  })

  singleSpa.registerApplication(
    'layout',
    AppRegistry.newReactSpaApp(() => LayoutMain, 'root'),
    () => {
      return !routing.isSignInPage()
    },
    { registry }

import React from "react";
import NProgress from "nprogress";
import { withStyles } from "@material-ui/core/styles";
import NoSsr from "@material-ui/core/NoSsr";

NProgress.configure({
  template: `
    <div role="bar" class="nprogress-bar">
      <dt></dt>
      <dd></dd>
    </div>
  `,
});

const styles = theme =&gt; {
  const color = `green`;

  return {
    "@global": {
      "#nprogress": {
        direction: `ltr`,
        pointerEvents: `none`,

@keyframes nprogress-spinner {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  `;

  const node = document.createElement(`style`);
  node.id = `nprogress-styles`;
  node.innerHTML = styles;
  document.head.appendChild(node);

  NProgress.configure(options);
};