likes
comments
collection
share

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

作者站长头像
站长
· 阅读数 12

🙏废话不多说系列，直接开整🙏

一、简介

NProgress.js 是一个轻量级的 JavaScript 库，用于在应用的页面顶部显示一个进度条，指示页面加载或异步操作的进度。它非常适合用于单页面应用程序（SPA），能够在路由变化时给用户友好的加载提示。本文是 NProgress.js 的基本使用方法和一些配置选项的详细介绍。

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

我们进入到官网首页，即可发现 nprogress 进度条的几个核心功能：

（当然，我们也是可以针对进度条进行个性化的设置的，请继续看下文演示）

  1. 显示自身进度条；
  2. 手动设置进度条的进度；
  3. 动态控制调整进度条的进度；
  4. 直接完成进度条进度，然后隐藏进度条；

二、使用案例教程

（0）前提说明

由于本文章是为了简化上手难度，我这直接使用了 CDN 的方式引入第三方的 JS 和 CSS 文件来安装，已达到快速使用和演示的目的，如果需要使用 npm 的方式如下自行对应学习即可。

【1】CDN 方式安装 nprogress.js 

直接在 HTML 文件中引入对应 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></script>
【2】NPM 或  yarn 方式安装 nprogress 库到本地
# 方式1：电脑需要安装 node
npm 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 文件哈。如下两个步骤：

  1. 第一步：引入对应的 nprogress 的 JS 和 CSS 文件；
  2. 第二步：需要在 <script> 标签内部引入对应的 NProgess 对象进行简单的配置即可。

以下就是完整的页面加载进度条完整源码，内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
		<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></script>
	</head>
  <body>
		
		<script type="text/javascript">
			NProgress.configure({ showSpinner: true }); // 是否显示旋转加载组件
			NProgress.start(); // 显示进度条
			
			// 模拟页面加载延迟
			setTimeout(function() {
			    NProgress.done(); // 隐藏进度条
			}, 2000);
		</script>
	</body>
</html>

演示效果如下：

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

演示内容源码说明：
  1. 【NProgress.configure({ showSpinner: true }); 】含义：用于定义 加载显示是否显示旋转空间。这里你可以直接 定义 showSpinner:false 不多余显示旋转条即可。
  2. 【NProgress.start(); 】 含义：启动进度条
  3. 【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="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
        <script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></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>

对应的亲测演示效果展示如下：

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

（3）升级版2：自定义进度条和旋转组件样式示例

需要达成的效果展示：

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

完整源码如下： 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
        <script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></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="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
        <script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></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>

展示效果如下：

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

（5）升级版4：指定加载的父级元素

我们基于【升级版1】，指定加载到的父级元素标签，默认是 <body>，我们可以指定到其他的加载元素中，例如自定义的 <div> 中通过元素选择器指定上级元素即可，如下演示示意图：

「前端开发」页面加载进度条组件：nprogress.js 使用教程案例

完整示例源码如下： 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
		<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></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>

三、扩展：在 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 了。我们下篇文章见 🎉

附录

  1. 官网地址：NProgress: slim progress bars in JavaScript (ricostacruz.com)
  2. Github开源地址：GitHub - rstacruz/nprogress: For slim progress bars like on YouTube, Medium, etc

🙏至此，非常感谢阅读🙏

转载自:https://juejin.cn/post/7399044351626788876
评论
请登录