NProgress 使用教程

2026-01-16 09:24:11作者：盛欣凯Ernestine

项目介绍

NProgress 是一个轻量级的进度条库，灵感来源于 Google、YouTube 和 Medium。它提供了一个细长、优雅的进度条，适用于页面加载和 Ajax 任务的进度指示。NProgress 使用简单，只需几行代码即可集成到你的项目中。

项目快速启动

安装

你可以通过 npm 或直接在 HTML 中引入 NProgress 的 JavaScript 文件来安装 NProgress。

通过 npm 安装

npm install nprogress

通过 HTML 引入

<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css"/>

基本使用

以下是一个简单的示例，展示如何在页面加载时显示进度条。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>NProgress 示例</title>
  <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css"/>
</head>
<body>
  <script>
    NProgress.start();
    setTimeout(function() {
      NProgress.done();
    }, 2000);
  </script>
</body>
</html>

应用案例和最佳实践

应用案例

NProgress 常用于以下场景：

页面加载进度：在页面加载时显示进度条，提升用户体验。
Ajax 请求：在 Ajax 请求开始和结束时显示进度条，指示请求进度。

最佳实践

合理使用：不要在每个小操作中都使用进度条，以免过度使用导致用户分心。
自定义样式：通过修改 CSS 来自定义进度条的样式，使其更符合你的项目风格。

#nprogress .bar {
  background: #29d;
  height: 3px;
}

典型生态项目

NProgress 可以与其他前端框架和库结合使用，以下是一些典型的生态项目：

React：可以使用 react-nprogress 库在 React 项目中集成 NProgress。
Vue.js：可以使用 vue-nprogress 库在 Vue.js 项目中集成 NProgress。
Angular：可以使用 ngx-nprogress 库在 Angular 项目中集成 NProgress。

通过这些库，你可以更方便地在不同的前端框架中使用 NProgress，提升项目的用户体验。

nprogress

For slim progress bars like on YouTube, Medium, etc

项目地址：https://gitcode.com/gh_mirrors/np/nprogress

登录后查看全文

项目优选

收起

docs

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

397

297

ops-math

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统

华为昇腾面向大规模分布式训练的多模态大模型套件，支撑多模态生成、多模态理解。

旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件，通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求，让密码技术应用更简单，同时探索后量子等先进算法创新实践，构建密码前沿技术底座！

NProgress 使用教程

项目介绍

项目快速启动

安装

通过 npm 安装

通过 HTML 引入

基本使用

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

热门内容推荐

最新内容推荐

项目优选

NProgress 使用教程

项目介绍

项目快速启动

安装

通过 npm 安装

通过 HTML 引入

基本使用

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选