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

登录后查看全文

项目优选

收起

kernel

deepin linux kernel

docs

OpenHarmony documentation | OpenHarmony开发者文档

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

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

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

Java

gitea

喝着茶写代码！最易用的自托管一站式代码托管平台，包含Git托管，代码审查，团队协作，软件包和CI/CD。

ops-math

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

🎉 基于Spring Boot、Spring Cloud & Alibaba、Vue3 & Vite、Element Plus的分布式前后端分离微服务架构权限管理系统

NProgress 使用教程

项目介绍

项目快速启动

安装

通过 npm 安装

通过 HTML 引入

基本使用

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

热门内容推荐

最新内容推荐

项目优选

NProgress 使用教程

项目介绍

项目快速启动

安装

通过 npm 安装

通过 HTML 引入

基本使用

应用案例和最佳实践

应用案例

最佳实践

典型生态项目

相关内容推荐

热门内容推荐

最新内容推荐

项目优选