jquery插件NProgress.js制作网页加载进度条
作者:bea
NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。 安装 依赖于 jQuery (1.8版
NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情!
你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现!
NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。
安装
依赖于 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 });
在线演示 http://ricostacruz.com/nprogress/
源码下载 https://github.com/rstacruz/nprogress
有用 | 无用
你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现。其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见。不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现!
NProgress.js应用于复杂网页的细长进度条。由 Google, YouTube, 和 Medium 提供灵感。
安装
依赖于 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 });
在线演示 http://ricostacruz.com/nprogress/
源码下载 https://github.com/rstacruz/nprogress
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- jquery实现点击label的同时触发文本框点击事件的方法
- jquery判断至少有一个checkbox被选中的方法
- js实现点击链接后延迟3秒再跳转的方法
- jQuery实现延迟跳转的方法
- jQuery判断一个元素是否可见的方法
- jquery超简单实现手风琴效果的方法
- js+html5实现canvas绘制圆形图案的方法
- js+html5实现canvas绘制简单矩形的方法
- js+html5实现canvas绘制镂空字体文本的方法
- js+html5通过canvas指定开始和结束点绘制线条的方法
- js+HTML5实现canvas多种颜色渐变效果的方法
- JavaSacript中charCodeAt()方法的使用详解
- 简介JavaScript中charAt()方法的使用
- JavaScript中length属性的使用方法
- jQuery插件bgStretcher.js实现全屏背景特效
- js+html5绘制图片到canvas的方法
- 简介JavaScript中valueOf()方法的使用1
- jQuery插件jRumble实现网页元素抖动
- js+html5获取用户地理位置信息并在Google地图上显示的方法