NProgress - 实现和 Youtube 一样的细长进度条
时间：2014-03-22
来源：小影志
作者：佚名
你也许已经在 Youtube 上看过了那道红色激光脉冲，它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！
安装
依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中。
使用方法
— 显示进度条
—设置百分比
— 增加一点点
— 完成进度条
你也可以...
- 添加到你调用 Ajax 的地方！绑定它到 jQuery
ajaxStart和ajaxStop事件上 - 没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条！把它绑定到
$(document).ready和$(window).load
配置插件
通过 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 });
NProgress: slim progress bars in JavaScript
相关下载
相关文章
更多+-
10/13
-
10/13
-
10/12
-
10/09
-
10/08
软件排行榜
- 最新排行
- 最热排行
- 评分最高
-
手机软件 大小:20.76MB -
手机软件 大小:20.76MB
-
手机软件 大小:20.76MB
-
手机软件 大小:89.1MB
