nprogress是一款显示页面加载进度条的插件-BFW插件库

nprogress是一款显示页面加载进度条的插件

方法：

可以把它绑定到ajax的start与stop上，还可以绑定到 $(document).ready 和$(window).load

NProgress.start() 显示进度条
NProgress.set(0.4) 设置百分比
NProgress.inc() 一个小增量
NProgress.done() 完成进度

配置
通过 minimum 来修改最小百分比。
NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role='bar' 属性的元素。
NProgress.configure({
template: "..."
});
通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。
NProgress.configure({ ease: 'ease', speed: 500 });

想关闭进度条步进？设置 trickle 为 false。

NProgress.configure({ trickle: false })

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

想禁用进度环？设置 showSpinner 为 false。
NProgress.configure({ showSpinner: false });

完整示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/nprogress.css" type="text/css" media="all" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/nprogress.js"></script>


</head>
<body>
    <div i>
        <h1> NProgress页面加载进度条演示</h1>
    </div>
    <script>
        NProgress.start();//开启
        setTimeout(function() {
            NProgress.set(0.6);//一秒后将进度显示为60%
        }, 1000)
        setTimeout(function() {
            NProgress.inc();//2秒后增加一小段进度，这个一小段可以在配置中设置
        }, 2000)

        //4秒后结束加载
        setTimeout(function() {
            NProgress.done();
        }, 4000)
    </script>
</body>
</html>

nprogress是一款显示页面加载进度条的插件

网友评论0

lazyload.js

pjax.js

pullToRefresh.js

pace.js

visible.pkgd.min.js

persist.min.js

agent.min.js

echo.min.js

headBand.min.js

nprogress.js