node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)
node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)NProgress.done();NProgress.start();<link rel='stylesheet' href='nprogress.css'/>基础用法简单的使用 .start() 和 .done() 去控制这个进度条。
今天介绍一款优秀交互效果的顶部进度条插件nprogress。
先看一下效果:
使用方法,将js和css引入到你的项目中。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
基础用法
简单的使用 .start() 和 .done() 去控制这个进度条。
NProgress.start();
NProgress.done();
以为这样就没了,那我只能说too young too simple。
高级用法
百分比: 通过set(n)方法设置进度条的百分比,0.1<n<1。
NProgress.set(0.0); // 等价于NProgress.start()
NProgress.set(0.4);
NProgress.set(1.0); //等价于NProgress .done()
递增: 调用 .inc()去递增这个进度条. 递增时会产生一个随机数,但永远不会是100%
NProgress.inc();
如果你想递增一个特定的值,你可以传入一个参数。
NProgress.inc(0.2); // 这个方法会获取当前的进度值然后增加 0.2 直到进度值为 0.994
显隐性: 通过设置.done()的true i它将会显示进度条,即使之前没有显示 (如果没有调用.start(), 默认的 .done() 将不会做任何事情)
NProgress.done(true);
获取进度值: 通过 .status可以获取当前进度值。
更多的配置和具体用法可以查看官网介绍。
网址:http://ricostacruz.com/nprogress/
相关推荐:JavaScript 日期处理类库---Moment.js