How to use nprogress - 10 common examples

import NProgress, { NProgressOptions } from 'nprogress';

console.log(NProgress.status);
console.log(NProgress.version);

// $ExpectType NProgress
NProgress.start();
NProgress.inc()
    .inc(0.2)
    .done();

NProgress.set(0.5);
NProgress.trickle();
console.log(NProgress.isStarted());
NProgress.done(true);

NProgress.configure({ minimum: 0.1 });
NProgress.configure({
    template: '<div></div>',
    easing: 'ease',
    speed: 500,
    trickle: true,
    showSpinner: false,
    trickleSpeed: 250,
    parent: '#content',
    // $ExpectError
    foo: ''
});

import NProgress, { NProgressOptions } from 'nprogress';

console.log(NProgress.status);
console.log(NProgress.version);

// $ExpectType NProgress
NProgress.start();
NProgress.inc()
    .inc(0.2)
    .done();

NProgress.set(0.5);
NProgress.trickle();
console.log(NProgress.isStarted());
NProgress.done(true);

NProgress.configure({ minimum: 0.1 });
NProgress.configure({
    template: '<div></div>',

import NProgress, { NProgressOptions } from 'nprogress';

console.log(NProgress.status);
console.log(NProgress.version);

// $ExpectType NProgress
NProgress.start();
NProgress.inc()
    .inc(0.2)
    .done();

NProgress.set(0.5);
NProgress.trickle();
console.log(NProgress.isStarted());
NProgress.done(true);

NProgress.configure({ minimum: 0.1 });
NProgress.configure({
    template: '<div></div>',
    easing: 'ease',
    speed: 500,
    trickle: true,
    showSpinner: false,
    trickleSpeed: 250,
    parent: '#content',
    // $ExpectError
    foo: ''
});

import NProgress, { NProgressOptions } from 'nprogress';

console.log(NProgress.status);
console.log(NProgress.version);

// $ExpectType NProgress
NProgress.start();
NProgress.inc()
    .inc(0.2)
    .done();

NProgress.set(0.5);
NProgress.trickle();
console.log(NProgress.isStarted());
NProgress.done(true);

NProgress.configure({ minimum: 0.1 });
NProgress.configure({
    template: '<div></div>',
    easing: 'ease',

router.beforeEach(async (to: Route, _: Route, next: any) => {
  // 路由
  const loadI18n = (isFirst: Boolean = false) => {
    // 加载语言
    import(`@/pages${to.path}/local.ts`).then(LOCAL => {
        bindLang(LOCAL.default)
        isFirst ? next({ ...to, replace: true }) : next();
    }).catch(() => {
        console.warn('找不到 多语言文件');
        isFirst ? next({ ...to, replace: true }) : next();
    })
  }
  NProgress.start();
  if (UserModule.token) {
    // Check roles
    if (UserModule.roles.length === 0) {
      try {
        await UserModule.GetUserInfo();
        RoutesModule.PageList(pageList);
        RoutesModule.GenerateRoutes(UserModule.menus);
        router.addRoutes(RoutesModule.dynamicRoutes);
        loadI18n(UserModule.roles.length > 0);
      } catch (err) {
        Message.error(err || "Has Error");
        location.href = "/login.html";
        // next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    } else {

onToken = async (res, createOrder) => {
    NProgress.start();
    const order = await createOrder({
      variables: {
        token: res.id,
      },
    });
    console.log(order);
    // Route them to that order page
    const { id } = order.data.createOrder;
    Router.push({
      pathname: `/order`,
      query: { id },
    });
  };
  render() {

router.beforeEach((to, from, next) => {
  // 进度条
  NProgress.start()
  // 关闭搜索面板
  store.commit('d2admin/search/set', false)
  // 验证当前路由所有的匹配中是否需要有登录验证的
  if (to.matched.some(r => r.meta.requiresAuth)) {
    // 这里暂时将cookie里是否存有token作为验证是否登录的条件
    // 请根据自身业务需要修改
    const token = util.cookies.get('AoomsToken')
    if (token && token !== 'undefined') {
      next()
    } else {
      // 将当前预计打开的页面完整地址临时存储 登录后继续跳转
      // 这个 cookie(redirect) 会在登录后自动删除
      //util.cookies.set('redirect', to.fullPath)
      // 没有登录的时候跳转到登录界面
      next({
        name: 'login'

Template.body.rendered = function () {
	/* Third-Party Progress bar: NProgress */
	NProgress.configure({trickleRate: 0.01, trickleSpeed: 1400})
	NProgress.start()

	// Jquery tooltip for reset button
	$('[data-toggle="tooltip"]').tooltip()

	// Receive files from Electron
	// Desktop.on('desktop', 'selected-file', (event, data) => {
	// 	console.log('Selected File Dialog Data:', event, data)
	// 	if (data.length === 1) {
	// 		// Single folder to open
	// 		$('#directory').val(data[0])
	// 		setPath()
	// 	}
	// })
}

try {
    return NProgress._start(...args);
  } catch (err) {
    // console.log('err', err);
  }
};
NProgress._done = NProgress.done;
NProgress.done = (...args) => {
  try {
    return NProgress._done(...args);
  } catch (err) {
    // console.log('err', err);
  }
};

NProgress.Bar = ({ id }) => React.createElement('div', { id, className: 'nprogress' });
NProgress.parentClassName = 'nprogress-parent';

export default NProgress;

NProgress.done = (...args) => {
  try {
    return NProgress._done(...args);
  } catch (err) {
    // console.log('err', err);
  }
};