每个项目产品都会让你加埋点,你是愿意花几天一个个加,还是愿意几分钟一个小时加完去喝茶聊天?来试试这520web工具, 高效加埋点,目前我们公司100号前端都在用,因为很好用,所以很自然普及开来了,推荐给大家吧
自己开发所以免费,埋点越多越能节约时间,点两下埋点就加上了,还不会犯错,里面有使用视频,反正免费 😄
官方网站:http://ricostacruz.com/nprogress/
下载地址:https://github.com/rstacruz/nprogress
安装
依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。
使用方法
NProgress.start() — 显示进度条
NProgress.set(0.4) —设置百分比
NProgress.inc() — 增加一点点
NProgress.done() — 完成进度条
你也可以...
- 添加到你调用 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 });