官网文档大概翻译了下,部分内容按照小编的语言习惯做了调整。
npm i nprogress
适用于Ajax 类型应用程序的超薄进度条。灵感来自Google,YouTube和Medium。
将nprogress.js和nprogress.css添加到您的项目。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
$ bower install --save nprogress
$ npm install --save nprogress
只需调用start()
和done()
以控制进度栏。
NProgress.start();
NProgress.done();
使用Turbolinks或类似的东西?确保您使用的是Turbolinks 1.3.0+,并使用以下命令:(在此处说明 )
$(document).on('page:fetch', function() { NProgress.start(); });
$(document).on('page:change', function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });
ajaxStart
和 ajaxStop
事件。$(document).ready
和$(window).load
。百分比:要设置进度百分比,请致电.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();
如果要增加特定值,可以将其作为参数传递:
NProgress.inc(0.2); // 这将获取当前状态值并添加0.2直到状态为0.994
强制完成:传递true
到done()
,即使未显示进度条也将显示进度条。(默认 如果.start()
不调用,.done()
不会做任何事情)
NProgress.done(true);
获取状态值:要获取状态值,请使用.status
minimum
配置最小的百分比。(默认值:0.08
)
NProgress.configure({ minimum: 0.1 });
template
您可以使用更改标记template
。要使进度条保持工作状态,请role='bar'
在其中保留一个元素。请参阅默认模板 以供参考。
NProgress.configure({
template: "<div class='....'>...</div>"
});
easing
和 speed
使用缓动(CSS缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认:ease
和200
)
NProgress.configure({ easing: 'ease', speed: 500 });
trickle
通过将此设置为来关闭自动递增行为false
。(默认值:true
)
NProgress.configure({ trickle: false });
trickleRate
trickleSpeed
单位分别是 百分比、毫秒
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
showSpinner
额,这是个啥?没明白。
NProgress.configure({ showSpinner: false });
parent
指定父容器。(默认值:body
)
NProgress.configure({ parent: '#container' });
只需nprogress.css
根据自己的喜好进行编辑。提示:您可能只想查找和替换出现的#29d
。
随附的CSS文件非常小...实际上,请随意对其进行剪贴,并自行制作!