jquery网页加载进度条NProgress.js
来源:互联网 发布:淘宝0.01刷手机 编辑:程序博客网 时间:2024/05/14 10:08
NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情!
你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现!
NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。
效果演示参考原博客。
安装
依赖于 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 });
转载:http://www.wufangbo.com/nprogress-js/
0 0
- jquery网页加载进度条NProgress.js
- jquery网页加载进度条NProgress.js
- NProgress.js全站jquery进度条插件
- NProgress.js:一个新的网页进度条控件
- nprogress页面加载进度条使用
- js 网页加载进度条效果
- js网页顶部线性页面加载进度条,jquery头部线性进度条总结
- NProgress.js全站进度条插件 中文API
- 在vue项目中使用Nprogress.js进度条
- 很完美的jquery网页加载进度条
- js(jquery)网页进度条加载n中办法和原理(也有css3动画进度条)
- NProgress.start();请求的进度条
- 为NProgress增加模态层,更完美的应用于复杂网页的细长进度条
- 网页加载进度条
- Android 加载网页进度条
- 网页加载进度条。
- 网页顶部加载进度条
- 获取网页加载进度条
- django 1.8 官方文档翻译: 1-1-2 快速安装指南
- clipRegion
- GLSL入门源码(1)
- ActionScript3.0入门之HelloWorld、页面跳转
- hdu 5323 Solve this interesting problem
- jquery网页加载进度条NProgress.js
- 【C++】修改const变量的值
- 下面是释放Bitmap的示例代码片段:
- 新安装的mysql必须调整的10项配置
- 微信公众平台——AIRKISS技术
- 在C/C++中,int、char、double、long所占的字节数
- url编码
- SecureCRT连接思科交换机
- LeetCode(240)Search a 2D Matrix II