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

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

简介: 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

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

相关文章
盘点那些好玩有趣的 VSCODE 插件
“工欲善其事,必先利其器!” vscode 作为前端开发的重要工具,其插件能大幅提升战斗力,精心收集12+插件,总有几款你还未曾拥有。
118 0
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
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载