NProgress 开源项目使用教程

2026-01-16 09:43:06作者：晏闻田Solitary

1. 项目的目录结构及介绍

NProgress 是一个轻量级的进度条库，适用于 Ajax 应用。以下是其基本的目录结构：

nprogress/
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── package.json
├── nprogress.css
└── nprogress.js

CHANGELOG.md: 记录项目的更新日志。
CONTRIBUTING.md: 指导如何为项目贡献代码。
LICENSE.md: 项目的许可协议。
README.md: 项目的介绍和使用说明。
package.json: 项目的依赖和脚本配置。
nprogress.css: 进度条的样式文件。
nprogress.js: 进度条的核心 JavaScript 文件。

2. 项目的启动文件介绍

NProgress 的启动文件是 nprogress.js。这个文件包含了进度条的核心逻辑和功能。要使用 NProgress，你需要在 HTML 文件中引入 nprogress.js 和 nprogress.css：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>NProgress Example</title>
  <link rel="stylesheet" href="nprogress.css"/>
</head>
<body>
  <script src="nprogress.js"></script>
  <script>
    NProgress.start();
    setTimeout(function() {
      NProgress.done();
    }, 1000);
  </script>
</body>
</html>

3. 项目的配置文件介绍

NProgress 没有专门的配置文件，但你可以通过 JavaScript 代码进行一些基本的配置。以下是一些常用的配置选项：

NProgress.configure({
  minimum: 0.1,
  easing: 'ease',
  speed: 200,
  showSpinner: false,
  trickle: true,
  trickleSpeed: 200,
  template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
});

minimum: 设置进度条的最小值。
easing: 设置进度条的动画缓动效果。
speed: 设置进度条的动画速度。
showSpinner: 是否显示进度条的旋转器。
trickle: 是否启用进度条的自动前进效果。
trickleSpeed: 设置进度条自动前进的速度。
template: 自定义进度条的 HTML 模板。