NProgress插件(进度条)

已于 2022-12-11 21:30:02 修改
阅读量843 收藏
点赞数
分类专栏： web 文章标签： 前端 vue.js npm
于 2022-08-05 15:40:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HHYZBC/article/details/126178478
版权
NProgress是一个轻量级的JavaScript插件，常用于制作类似于YouTube和Medium的加载进度条。安装通过npm，引入后调用start()和done()方法即可控制进度条的开始和结束。此外，可以自定义进度条颜色，只需修改样式文件中的背景属性。
摘要由CSDN通过智能技术生成

NProgress插件用于快速制作加载进度条。

极简主义进度条

rstacruz/nprogress：适用于YouTube，Medium等超长进度条 (github.com)https://github.com/rstacruz/nprogress

安装

npm install --save nprogress

引入

import nprogress from "nprogress"
import "nprogress/nprogress.css"

使用

开启进度条

nprogress.start();

结束进度条

nprogress.done();

定制

如果需要自定义进度条的颜色，只需要在引入的样式文件中查找并替换出现的#nprogress .bar中的

background属性。甚至你可以随意废弃它并制作自己的！

854b1d3417ba452fa7a095b363e1925e.png

 

HHYZBC
关注
专栏目录
vue3 后台管理 nprogress进度条使用
jieweiwujie的博客
02-28 448
在router.beforeEach中加NProgress.start()在router.afterEach中加NProgress.end()3 在main.js引入。
nprogress 进度条插件
一个憨憨的前端之路
07-29 254
nprogress官网 nprogress.js是一款进度条插件，个人用于vue的router.beforeEach()中。 安装方法： npm install --save nprogress (--save:开发也需要用到的依赖) api: NProgress.start(); NProgress.done(); NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0);
NProgress 安装与配置完全指南
gitblog_09101的博客
09-13 334
NProgress 安装与配置完全指南 nprogress For slim progress bars like on YouTube, Medium, etc 项目地址: https://gitcode.com/gh_mirr...
简约之美，JQuery之进度条插件
chaoma96的专栏
07-03 1798
JQuery Progress Bar是基于JQuery开发的进度条插件，秉承了JQuery的简约哲学。不仅容易使用，而且可以轻松定制外观。对于使用了JQuery框架的项目来说，需要使用进度条控件时这是一个不错的选择。 JQuery Progress Bar与常规插件一样，只要用选择器选择一个HTML元素后，直接调用插件的公开方法即可。它提供的公开方法名称为progressBar()。那么，当HT
进度条插件
吮指原味鸡的博客
03-24 318
进度条插件一、NProgress二级目录三级目录 一、NProgress 使用 <link rel='sylesheet' href='nprogress.css'> <script src='nprogress.js'></script> <script type='text/javascript'> NProgress.strat()//进度条开始运动 NProgress.done()//进度条结束运动 </script> 二级目录 三级
NProgress插件
魔法革1996
10-18 598
进度条与遮罩层 nprogress插件的使用 ajax的6个全局事件 nprogress进度条插件 nprogress插件是一个适用于ajax应用的轻量级的进度条插件。 官网 github地址 参考文档：http://blog.csdn.net/joyhen/article/details/24458427 使用步骤 引入js文件和css文件 <...
进度条插件：NProgress
k_happy的博客
04-11 385
github： https://github.com/rstacruz/nprogress 进入页面时显示加载进度： (引入js和css) $(document).ready(function(){ NProgress.start(); }); 注： https://blog.csdn.net/ltr15036900300/article/details/4732121...
vue-nprogress-进度条基于Vue的nprogress。-Vue.js开发
05-27
`vue-nprogress`就是这样一个专为Vue.js设计的进度条插件，它能很好地展示页面加载或异步操作的进度。 `nprogress`是原生的一个轻量级进度条库，主要针对Ajax应用，提供了一种优雅的方式显示页面加载进度。`vue-...
nprogress进度条插件
t1179813923的博客
06-24 149
下载 npm install --save nprogress yarn add nprogress CDN <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet"> <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
NProgress插件--进度条 插件
weixin_57792333的博客
09-22 250
摘自 github ; 地 址 https://github.com/rstacruz/nprogress#readme 在项目中安装 插件 npm install --save nprogress 成功之后 ，将 nprogress.js和nprogress.css添加到您的项目中。 // 引入进度条的js import NProgress from 'nprogress' // 引入 进度条的css import "nprogress/nprogress.css" 只需调.
Nprogress—进度条插件
sxy323的博客
09-22 796
Nprogress
流程进度插件
01-11
ystep是一款jQuery流程、步骤插件。在网站设计中，经常会用到步骤指示，做某件事一共需要几个步骤，现在正处于哪个步骤，对用户而言是非常有帮助的，不仅能让用户思路清晰，也能带给用户一种无形的激励。设计简洁，方便易用。 •体积小巧，便于集成。 •代码稳重，安全可靠。 •自由定制，步骤无限制。 •兼容性强，Webkit(谷歌)、Gecko(火狐)内核系列全兼容，IE系列除了极品IE6，其它全兼容。
两个进度条小插件
11-16
一个条形进度条和一个圆形进度条,可以自己设置样式和运动时间,只需要一个容器就可以了,传的参数注解中已经写好了.如有建议请与我联系,谢谢!
jQuery进度条插件
06-23
jQuery进度条插件,jQuery进度条插件,jQuery进度条插件
进度条相关插件
探鱼不是鱼
11-30 139
nprogress github地址 nprogress 下载/引入 npm install --save nprogress // 引入进度条插件 import NProgress from "nprogress"; // 引入样式 import "nprogress/nprogress.css"; 使用 // 开始进度条 NProgress.start(); // 结束进度条 NProgress.done(); 示例 ...
NProgress---轻量级的前端进度条插件
最新发布
xllllll___的博客
10-11 295
NProgress插件出现在页面的顶部，作为一个进度条，在项目中使用大大优化了用户的体验，一般网站请求接口或者加载一些文件需要使用这种进度条来不断提示用户。
进度条控件
weixin_30662849的博客
07-25 689
[ToolboxItem(true)] public partial class ProgressExt : Control { private Orientation orientation = Orientation.Horizontal; /// <summary> /// 控件方向 /// </summa...
vue项目的进度条插件 -- nprogress
weixin_55931914的博客
03-27 585
在Vue项目中，nprogress是一个轻量级的Ajax进度条组件
NProgress 插件如何使用
09-08
NProgress 插件是一个轻量级的进度条插件，用于在 Ajax 请求或页面加载时显示进度条。要使用 NProgress 插件，你需要按照以下步骤进行操作： 1. 在你的 HTML 文件中引入 NProgress 的 CSS 和 JavaScript 文件。你可以在 NProgress 的 GitHub 仓库中找到并下载这些文件。 ```html <link rel="stylesheet" href="nprogress.css"> <script src="nprogress.js"></script> ``` 2. 在你的 JavaScript 代码中，使用 NProgress.start() 来开始显示进度条。例如，在 Ajax 请求开始时调用 NProgress.start() 来显示进度条。 ```javascript NProgress.start(); ``` 3. 在 Ajax 请求完成后，使用 NProgress.done() 来隐藏进度条。例如，在 Ajax 请求完成时调用 NProgress.done() 来隐藏进度条。 ```javascript NProgress.done(); ``` 4. 可选地，你可以使用 NProgress.set() 方法来设置进度条的进度。例如，在长时间的异步操作中，你可以使用 NProgress.set(0.5) 来设置进度条的进度为 50%。 ```javascript NProgress.set(0.5); ``` 这就是使用 NProgress 插件的基本步骤。你可以根据自己的需求进行定制和扩展，例如修改样式、设置动画效果等。更多详细的使用方法和选项，请参考 NProgress 的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

HHYZBC

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值