开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

nprogress 插件 网页顶部加载进度条

2022-07-01 30

简介： nprogress 插件 网页顶部加载进度条
+关注继续查看

效果（看顶部）

image


安装

CSDN地址（我设置的免积分，推荐下载）：

https://download.csdn.net/download/weixin_45525272/14944311


GitHub地址：https://github.com/rstacruz/nprogres


  1. 外链引入方式（将包里的 .js .css移动到工程中）


<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>


  1. NPM安装方式


$ npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


使用

1.基本用法



NProgress.start()


  • 利用NProgress.done()隐藏进度条


NProgress.done()


2.高级用法


  • 设置百分比：调用 .set(n) 方法，其中n的范围0-1


NProgress.set(0.0);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()


  • 增量：调用 .inc() 方法，以随机量递增进度条，永远不会达到100%，用于每个图像负载（或类似）


NProgress.inc();


  • 特定值增量：调用 .inc(n) 方法以特定值递增进度条


NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994
• 1


  • 强制完成：通过传递 true 到 .done() 方法，将显示进度条，即使它未显示（默认如果不调用 .start() 方法， .done() 方法不会做任何事）


NProgress.done(true);


  • 获取状态值：使用 .status 获取状态值


NProgress.status

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

前端开发 JavaScript
rds插件 rds插件问题 progress加载 css网页加载 rds插件缓存问题
开发者社区 > 开发与运维 > 文章
作者高分内容
更多
Xftp 7(FTP/SFTP客户端) V7.0.0107 官方中文免费正式版(附文件+安装教程) 155 Xshell 7(SSH远程终端工具) v7.0.0109 官方中文正式版(附文件+安装教程) 101 VScode使用element-ui插件准备 209 正在等待缓存锁：无法获得锁 /var/lib/dpkg/lock-frontend。锁正由进程 12836（unattended-upgr）持有 147 Linux 命令解析器 214
相关文章
狂奔滴小马
盘点那些好玩有趣的 VSCODE 插件
“工欲善其事，必先利其器！” vscode 作为前端开发的重要工具，其插件能大幅提升战斗力，精心收集12+插件，总有几款你还未曾拥有。
118 0
Lux_Sun
Vue.js - 单页面 SPA ，IOS 端页面跳转后调用微信 JSSDK 时报错： &quot;invalid signature&quot; 解决方案
Vue.js - 单页面 SPA ，IOS 端页面跳转后调用微信 JSSDK 时报错： &quot;invalid signature&quot; 解决方案
50 0
德哥
RDS for PostgreSQL 云盘加密功能使用方法
RDS for PostgreSQL支持数据盘的加密功能，提供更高的数据存储安全等级。(加密KEY可以由用户提供，也可以由KMS服务生成。) 使用方法： 1、选中可用区（香港、上海），创建加密KEY。
4088 0
技术小甜
网页加强保存插件 V 1.3
1053 0
余二五
【iOS-Cocos2d游戏开发之十五】详解CCProgressTimer 进度条实现“理想”游戏进度条！
1137 0
史迪奇abc
KSFramework：集成U3D热重载框架 - README
1614 0
余二五
【iOS-Cocos2d游戏开发之十五】详解CCProgressTimer 进度条实现“理想”游戏进度条！
641 0
老朱教授
二、如何通过URL获取其他网页源代码内容（火狐插件扩展开发教程）
1354 0
玄学酱
跟屌丝大哥学习DB2---DB2 runstats、reorgchk、reorg 命令
2589 0
墨云天
Cocos2d-x3.2 Progress进度条
1233 0
+关注
流楚丶格念
csdn平台优质创作者，51cto TOP博主，360图书馆科技博主，燕山大学目前大三在读，日拱一卒，功不唐捐，加油！！！
1010
文章
0
问答
作者高分内容
更多
Xftp 7(FTP/SFTP客户端) V7.0.0107 官方中文免费正式版(附文件+安装教程) 155 Xshell 7(SSH远程终端工具) v7.0.0109 官方中文正式版(附文件+安装教程) 101 VScode使用element-ui插件准备 209 正在等待缓存锁：无法获得锁 /var/lib/dpkg/lock-frontend。锁正由进程 12836（unattended-upgr）持有 147 Linux 命令解析器 214
文章排行榜
最热
最新
1 阿里云 Lindorm联合EMQ ，构建新一代 IoT 全链数据解决方案 145487
2 云上自动化运维CloudOps系列沙龙 第二弹——自动化，才高效 138607
3 当我们谈论不可变基础设施时，我们在谈论什么 137830
4 “穿越”到虚拟世界笑风生，网易瑶台沉浸式活动平台创新云端活动体验 60340
5 云上解锁Web3.0 阿里云XR平台助力彼真科技呈现沉浸式演唱会 48771
6 使用函数计算的常态化疫情信息推送 26656
7 SaaS厂商数据库设计（2）-租户路由 23515
8 云端舞蹈——阿里云Serverless函数计算测评 23499
9 基于阿里云Serverless函数计算开发的疫情数据统计推送机器人 17421
10 Lindorm CDC技术解析 17215
11 阿里云商标注册申请官方入口（附商标自助申请流程） 15867
12 《微服务治理技术白皮书》电子版和音频版地址 14606
13 Quick BI数据大屏可视化大赛 21700
14 深度学习与CV教程(15) | 视觉模型可视化与可解释性 15550
15 深度学习与CV教程(17) | 深度强化学习 (马尔可夫决策过程,Q-Learning,DQN) 15695
16 深度学习与CV教程(16) | 生成模型(PixelRNN,PixelCNN,VAE,GAN) 15417
17 XGRIDS三维重建服务，构建云上数字孪生世界 12751
18 深度学习与CV教程(18) | 深度强化学习 (梯度策略,Actor-Critic,DDPG,A3C) 15833
19 “智物智造”杯2022物联网创新应用大赛，你的idea 改变世界！ 51016
20 有奖互动｜7.19数据库升舱计划实战峰会：行业领袖齐聚，他们因何而来？ 10036
1 「开源人说」第二期重磅上线！一起走进《从开源中来，到开源中去》 55
2 三种插件开发模式，带你玩废tinymce 63
3 阿里云解决方案架构师张平：云原生数字化安全生产的体系建设 65
4 见微知著，带你认认数据分析的大门，站在门口感受一下预测的魅力 111
5 用ModelScope带你制作小动画 157
6 2022云原生编码挑战赛----Serverless函数架构设计以及使用场景理解 146
7 揭秘CCF国际AIOps挑战赛选手背后的“武林神器” 53
8 分布式事务 581
9 实战之AngularJS 的Scope和Service的深入应用心得 312
10 【SimpleFunction系列二.3】Redisson分布式锁8种锁模式剖析 171
11 动手实操，让你的 Kubernetes 集群弹起来！ 631
12 shell养成计划之易筋经篇（持续更新中） 167
13 时间复杂度和空间复杂度计算（数据结构C语言实现1） 63
14 ModelScope--人像卡通化、人像美肤 624
15 秒杀架构分析与实践 73
16 一文搞懂EMAS Serverless小程序开发｜电子书免费下载 161
17 Serverless函数计算评测征集令获奖名单 477
18 基于AnalyticDB PostgreSQL数据共享实现企业级跨多业务的敏捷分析 58
19 初次体验图像分类模型识别 161
20 体验人像美肤模型 108
推荐文章
参与评测免费使用模型库赢取AirPods等好礼 参与Grafana评测 得多重好礼 重磅来袭！2022年上半年阿里云开发者电子书榜单新鲜出炉 乘风者计划邀您入驻社区，精彩权益即刻享
相关电子书
更多
低代码开发师（初级）实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期：MySQL数据库进阶实战
立即下载