前言：
今天我们对“html页面加载进度条”大致比较关注，姐妹们都需要剖析一些“html页面加载进度条”的相关知识。那么小编同时在网络上收集了一些对于“html页面加载进度条””的相关知识，希望朋友们能喜欢，咱们一起来了解一下吧！一、简介
NProgress.js 是一个轻量级的 JavaScript 库，用于在应用的页面顶部显示一个进度条，指示页面加载或异步操作的进度。它非常适合用于单页面应用程序（SPA），能够在路由变化时给用户友好的加载提示。本文是 NProgress.js 的基本使用方法和一些配置选项的详细介绍。
我们进入到官网首页，即可发现 nprogress 进度条的几个核心功能：
（当然，我们也是可以针对进度条进行个性化的设置的，请继续看下文演示）
显示自身进度条；手动设置进度条的进度；动态控制调整进度条的进度；直接完成进度条进度，然后隐藏进度条；
二、使用案例教程（0）前提说明
由于本文章是为了简化上手难度，我这直接使用了 CDN 的方式引入第三方的 JS 和 CSS 文件来安装，已达到快速使用和演示的目的，如果需要使用 npm 的方式如下自行对应学习即可。
【1】CDN 方式安装 nprogress.js
直接在 HTML 文件中引入对应 <script> 标签即可，如下：
<link rel="stylesheet" href=";><script src=";></script>【2】NPM 或 yarn 方式安装 nprogress 库到本地
# 方式1：电脑需要安装 nodenpm install nprogress -S# 方式2：可以基于 电脑安装了 node 之后，再安装 yarn （为什么要安装 yarn？仁者见仁智者见智哈）## 2.1 第一步： npm install --global yarn## 2.2 第二步：yarn --version # 验证是否安装 yarn 成功yarn add nprogress（1）基础版0：初步简单案例
这里我们是为了简单的使用和方便展示，我们直接使用 CDN 的方式直接在 HTML 文件内容中引入对应的JS 和 CSS 文件哈。如下两个步骤：
第一步：引入对应的 nprogress 的 JS 和 CSS 文件；第二步：需要在 <script> 标签内部引入对应的 NProgess 对象进行简单的配置即可。
以下就是完整的页面加载进度条完整源码，内容如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=";> <script src=";></script> </head> <body> <script type="text/javascript"> NProgress.configure({ showSpinner: true }); // 是否显示旋转加载组件 NProgress.start(); // 显示进度条 // 模拟页面加载延迟 setTimeout(function() { NProgress.done(); // 隐藏进度条 }, 2000); </script> </body></html>演示效果如下：
演示内容源码说明：
【NProgress.configure({ showSpinner: true });】含义：用于定义 加载显示是否显示旋转空间。这里你可以直接 定义 showSpinner:false 不多余显示旋转条即可。【NProgress.start();】 含义：启动进度条【NProgress.done();】含义：结束进度条 （或者 说是 隐藏进度条）
（2）升级版1：增加设置进度条样式
我们从基础的简单案例中我们可以看到，默认是浅蓝色的进度条组件。这里有时候我们在实际业务中会需要设置不同的系统皮肤，此时如果还是浅蓝色的有可能会出现与系统不符合的问题，所以，我们来一起看看如何设置颜色、大小、位置等样式：
<!-- 很简单：通过添加 CSS 样式来自定义进度条的颜色和其他视觉效果。 --><style type="text/css"> #nprogress .bar { background: yellow !important; /* 自定义颜色 */ }</style>为了你更清晰且方便全面的了解，完整的代码展示如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=";> <script src=";></script> <style type="text/css"> #nprogress .bar { background: yellow !important; /* 自定义颜色 */ } </style> </head> <body> <script type="text/javascript"> NProgress.configure({ showSpinner: false }); NProgress.start(); // 显示进度条 // 模拟页面加载延迟 setTimeout(function() { NProgress.done(); // 隐藏进度条 }, 2000);// （毫秒） </script> </body></html>对应的亲测演示效果展示如下：
（3）升级版2：自定义进度条和旋转组件样式示例
需要达成的效果展示：
完整源码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=";> <script src=";></script> <style type="text/css"> #nprogress .bar { background: greenyellow !important; // 自定义颜色 } /* 旋转加载组件 */ #nprogress .spinner { display: block; position: fixed; z-index: 1031; color: red; top: 15px; right: 50%; } /* 旋转加载组件 ICON 图标自定义样式 */ #nprogress .spinner-icon { width: 50px; height: 50px; /* 旋转组件粗细 */ border: solid 8px transparent; /* 红色 */ border-top-color: red; /* 浅蓝色 */ border-left-color: #29d; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; } </style> </head> <body> <script type="text/javascript"> NProgress.configure({ easing: 'ease', // 动画方式 speed: 5000, // 递增进度条的速度 showSpinner: true, // 是否显示加载指示器 trickle: false, // 是否开启自动递增行为 trickleSpeed: 200, // 自动递增间隔 minimum: 0.3, // 更改启动时使用的最小百分比 parent: 'body', // 指定进度条的父容器 barSelector: '[role="bar"]', // 进度条选择器 spinnerSelector: '[role="spinner"]' // 加载指示器选择器 }); NProgress.start(); // 显示进度条 // 模拟页面加载延迟 setTimeout(function() { NProgress.done(); // 隐藏进度条 }, 200); </script> </body></html>扩展：其他的样式自定义，我们可以通过直接进入打开 nprogress.css 样式文件，按照指定的 nprogress.css 进行调整覆盖处理。
（4）升级版3：设置进度条的递增速度
我们基于【基础版0】，通过上述的案例，我们发现：进度条的显示度是由慢到快的，如果我们手动控制根据实际情况来处理呢？又会是什么样的效果呢？我们一起来看：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=";> <script src=";></script> <style type="text/css"> #nprogress .bar { background: yellow !important; // 自定义颜色 } </style> </head> <body> <script type="text/javascript"> NProgress.configure({ showSpinner: false, // 不现实多余的旋转加载组件 speed: 5000, // 【核心】递增进度条的速度（毫秒） }); NProgress.start(); // 显示进度条 // 模拟页面加载延迟 setTimeout(function() { NProgress.done(); // 隐藏进度条 }, 200); </script> </body></html>展示效果如下：
（5）升级版4：指定加载的父级元素
我们基于【升级版1】，指定加载到的父级元素标签，默认是 <body>，我们可以指定到其他的加载元素中，例如自定义的 <div> 中通过元素选择器指定上级元素即可，如下演示示意图：
完整示例源码如下：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href=";> <script src=";></script> <style type="text/css"> #nprogress .bar { background: blue !important; // 自定义颜色 } #nprogressDiv { width: 99%; height: 10px; background-color: #ff0000 } </style> </head> <body> <!-- 这是一个容纳进度条的上级组件 --> <div id="nprogressDiv"></div> <script type="text/javascript"> NProgress.configure({ showSpinner: false, parent: '#nprogressDiv', // 指定进度条的父容器 }); NProgress.start(); // 显示进度条 // 模拟页面加载延迟 setTimeout(function() { NProgress.done(); // 隐藏进度条 }, 2000); //（毫秒） </script> </body></html>（6）业务场景使用：请求进度 和 页面跳转加载 显示进度条【1】场景一：页面加载进度在页面加载（如 SPA 的路由跳转）时自动显示和隐藏进度条。
// 1.假设你使用的是 Vue、React 或其他框架的路由系统 // 监听路由变化 router.beforeEach((to, from, next) => { NProgress.start(); // 页面跳转前开始进度条 next(); }); router.afterEach(() => { NProgress.done(); // 页面跳转后完成进度条 });// 2.如果是原生的js HTML页面，我们可以使用如下内容进行监听，页面加载完毕即进度条完成。document.addEventListener('DOMContentLoaded', function() { // 在这里编写您需要执行的业务逻辑 console.log('DOM 内容加载完毕'); NProgress.done();});【2】场景二： Axios 请求加载显示进度条对于 Ajax 请求，你可以在请求开始时显示进度条，在请求完成时隐藏它。值得注意：一般vue,angular,react 再请求的时候会又这种进度条配置的。// 使用 Axios 作为示例 axios.interceptors.request.use(function (config) { NProgress.start(); // 发送请求前开始进度条 return config; }, function (error) { // 请求错误处理 return Promise.reject(error); }); axios.interceptors.response.use(function (response) { NProgress.done(); // 请求完成后完成进度条 return response; }, function (error) { // 响应错误处理 NProgress.done(); // 即使发生错误，也完成进度条 return Promise.reject(error); });三、扩展：在 Vue 中使用示例在 Vue 项目中，可以将 NProgress.js 集成到路由系统中，方便页面跳转时显示进度条。在 router/index.js 中引入 NProgress 并在路由卫士中调用相应的 API。import NProgress from 'nprogress'import 'nprogress/nprogress.css'// 导入进度条import { start, close } from '../utils/nprogress';const router = new VueRouter({ // ...});router.beforeEach((to, from, next) => { NProgress.start(); next();});router.afterEach(() => { NProgress.done();});总结NProgress.js 使用一种简单的方式来改善用户体验，在单页应用中，通过在页面跳转期间显示进度条，可以让用户知道页面正在努力加油加载中，从而减少用户的等待焦虑感。好啦，如果想更加详细和完全的定制化自己的进度条不妨试试看看 nprogress.css 文件，只需要覆盖次样式文件即可，或者你想再深入你可以看看附录中的开源地址哦，祝你学习愉快！(*-∀-)ノYes~
至此，相信你已经基本了解并可以基本在项目中使用 NProgress.js 了。我们下篇文章见
附录官网地址：NProgress: slim progress bars in JavaScriptGithub开源地址：GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc
标签： #html页面加载进度条
