快捷搜索:  汽车  科技

node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)

node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)NProgress.done();NProgress.start();<link rel='stylesheet' href='nprogress.css'/>基础用法简单的使用 .start() 和 .done() 去控制这个进度条。

node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)(1)

今天介绍一款优秀交互效果的顶部进度条插件nprogress。

node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)(2)

start的数量还是很多的,说明是个很不错的插件,也有很多大神也在使用。

先看一下效果:

node 爬虫插件(优秀交互体验的顶部进度条插件----nprogress)(3)

效果嘛,还是杠杠的,比传统的进度条效果和交互效果个人觉得好的多!

使用方法,将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

猜您喜欢: