跳到主要内容

NProgress.js

NProgress 是一个轻量级的进度条组件，使用简便，可以很方便集成到单页面应用或原生项目中。

安装​

npm install nprogress

用法​

点击播放按钮，在顶部查看进度条状态。

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
NProgress.start()
显示进度条
NProgress.set(0.4)
设置一个百分比值
NProgress.inc()
增加一点进度
NProgress.done()
完成进度

全局配置​

nprogress.js
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

NProgress.configure({ showSpinner: false }); //禁用进度环
NProgress.configure({ trickle: false }); //关闭进度条步进
NProgress.configure({ trickleSpeed: 200 }); //每次步进间隔，单位毫秒ms
NProgress.configure({ easing: 'linear' }); //动画方向
NProgress.configure({ speed: 10 }); //动画速度，单位毫秒ms
NProgress.configure({ minimum: 0.08 }); //最小百分比
NProgress.configure({ parent: 'body' }); //指定进度条的父容器的选择器，用于设置进度条的位置。
NProgress.configure({ barSelector: '.bar' }); //指定进度条元素的选择器
NProgress.configure({ spinnerSelector: '.spinner' }); //指定旋转加载图标元素的选择器。

NProgress.isStarted(); //检查进度条是否已经启动。返回值boolean
NProgress.isRendered(); //检查进度条是否已经被渲染。返回值boolean
全局配置操作按钮，请点击播放按钮查看效果。
每次步进间隔，单位毫秒ms
关闭状态

样式配置​

#nprogress .bar {
  height: 10px !important; /*高度*/
  background: #2e8555 !important; /*背景色*/
}

/*右上角进度环颜色*/
#nprogress .spinner-icon {
  border-top-color: #2e8555 !important;
  border-left-color: #2e8555 !important;
}
全局样式配置，请点击播放按钮查看效果。
背景色:  
#000000,0%
进度条高度:

项目引用​

原生HTML​

如果您要获取NProgress的CDN链接，请访问https://www.bootcdn.cn/

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AGoodBook</title>
    <link
      href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
    <script>
      NProgress.start();
      setTimeout(() => {
        NProgress.done();
      }, 3000);
    </script>
  </body>
</html>

Vue.js项目​

您可以通过Vue路由守卫，在前置守卫进行开启进度操作，在后置守卫进行结束进度操作。您亦或者选择网络请求时进行进度条的开启与结束操作。

import router from '@/router/index.ts';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

router.beforeEach((to, from, next) => {
  NProgress.start();
  next();
});

router.afterEach((to, from) => {
  NProgress.done();
});

React.js项目​

React加载组件需要渲染懒加载组件，可将进度条封装成懒加载组件。

CustomNProgress.jsx
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

function CustomNProgress() {
  React.useEffect(() => {
    // 组件渲染时，开启进度条模式
    NProgress.start();
    return () => {
      // 组件销毁时，结束进度条模式
      NProgress.done();
    };
  }, []);

  return null;
}
export default NProgress;

挂载懒加载组件

import CustomNProgress from 'CustomNProgress.jsx';

export default function Main() {
  return (
    <Suspense fallback={<CustomNProgress />}>
      <Outlet />
    </Suspense>
  );
}