nprogress官网教程小记

官网文档大概翻译了下,部分内容按照小编的语言习惯做了调整。

安装

npm i nprogress

主页

github.com/rstacruz/nprogress

资料库

github.com/rstacruz/nprogress

NProgress

适用于Ajax 类型应用程序的超薄进度条。灵感来自Google,YouTube和Medium。

安装

nprogress.jsnprogress.css添加到您的项目。

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

NProgress可通过bower以及npmspm获得

$ 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(); });

提示

  • 为您的Ajax通话增加进度!将其绑定到jQuery ajaxStartajaxStop事件。
  • 即使没有Turbolinks / Pjax,也可以制作精美的加载条!将其绑定到 $(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    

强制完成:传递truedone(),即使未显示进度条也将显示进度条。(默认 如果.start()不调用,.done()不会做任何事情)

NProgress.done(true);

获取状态值:要获取状态值,请使用.status

配置

最小值minimum

配置最小的百分比。(默认值:0.08

NProgress.configure({ minimum: 0.1 });

模板template

您可以使用更改标记template。要使进度条保持工作状态,请role='bar'在其中保留一个元素。请参阅默认模板 以供参考。

NProgress.configure({
  template: "<div class='....'>...</div>"
});

CSS动画属性 easingspeed

使用缓动(CSS缓动字符串)和速度(以毫秒为单位)调整动画设置。(默认:ease200

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文件非常小...实际上,请随意对其进行剪贴,并自行制作!

版权声明

弈心博客


本文首发site_name,转载请附上博文链接!