NProgress插件(进度条)

已于 2022-12-11 21:30:02 修改
阅读量808 收藏
点赞数
分类专栏： 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 404
在router.beforeEach中加NProgress.start()在router.afterEach中加NProgress.end()3 在main.js引入。
nprogress进度条插件
t1179813923的博客
06-24 144
下载 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 进度条插件
一个憨憨的前端之路
07-29 244
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);
简约之美，JQuery之进度条插件
chaoma96的专栏
07-03 1792
JQuery Progress Bar是基于JQuery开发的进度条插件，秉承了JQuery的简约哲学。不仅容易使用，而且可以轻松定制外观。对于使用了JQuery框架的项目来说，需要使用进度条控件时这是一个不错的选择。 JQuery Progress Bar与常规插件一样，只要用选择器选择一个HTML元素后，直接调用插件的公开方法即可。它提供的公开方法名称为progressBar()。那么，当HT
NProgress 使用教程
最新发布
gitblog_00500的博客
08-08 615
NProgress 使用教程 nprogressFor slim progress bars like on YouTube, Medium, etc项目地址:https://gitcode.com/gh_mirrors/np/nprogress 项目介绍 NProgress 是一个轻量级的进度条库，灵感来源于 Google、YouTube 和 Medium。它提供了一个细长、优雅的进度条，适用...
进度条插件
吮指原味鸡的博客
03-24 310
进度条插件一、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 585
进度条与遮罩层 nprogress插件的使用 ajax的6个全局事件 nprogress进度条插件 nprogress插件是一个适用于ajax应用的轻量级的进度条插件。 官网 github地址 参考文档：http://blog.csdn.net/joyhen/article/details/24458427 使用步骤 引入js文件和css文件 <...
进度条插件：NProgress
k_happy的博客
04-11 373
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插件--进度条 插件
weixin_57792333的博客
09-22 240
摘自 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 788
Nprogress
流程进度插件
01-11
ystep是一款jQuery流程、步骤插件。在网站设计中，经常会用到步骤指示，做某件事一共需要几个步骤，现在正处于哪个步骤，对用户而言是非常有帮助的，不仅能让用户思路清晰，也能带给用户一种无形的激励。设计简洁，方便易用。 •体积小巧，便于集成。 •代码稳重，安全可靠。 •自由定制，步骤无限制。 •兼容性强，Webkit(谷歌)、Gecko(火狐)内核系列全兼容，IE系列除了极品IE6，其它全兼容。
两个进度条小插件
11-16
一个条形进度条和一个圆形进度条,可以自己设置样式和运动时间,只需要一个容器就可以了,传的参数注解中已经写好了.如有建议请与我联系,谢谢!
jQuery进度条插件
06-23
jQuery进度条插件,jQuery进度条插件,jQuery进度条插件
进度条相关插件
探鱼不是鱼
11-30 129
nprogress github地址 nprogress 下载/引入 npm install --save nprogress // 引入进度条插件 import NProgress from "nprogress"; // 引入样式 import "nprogress/nprogress.css"; 使用 // 开始进度条 NProgress.start(); // 结束进度条 NProgress.done(); 示例 ...
进度条控件
weixin_30662849的博客
07-25 683
[ToolboxItem(true)] public partial class ProgressExt : Control { private Orientation orientation = Orientation.Horizontal; /// <summary> /// 控件方向 /// </summa...
vue项目的进度条插件 -- nprogress
weixin_55931914的博客
03-27 560
在Vue项目中，nprogress是一个轻量级的Ajax进度条组件
Vue使用nprogress插件
路虽远，行则必至！
05-25 253
或者在node_modules/nprogress下，自行修改。
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、付费专栏及课程。

余额充值