jquery插件NProgress.js制作网页加载进度条


Posted in Javascript onJune 05, 2015

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

Javascript 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&”)
Dec 23 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
r.js来合并压缩css文件的示例
Apr 26 Javascript
React实现全局组件的Toast轻提示效果
Sep 21 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
详解基于webpack&gettext的前端多语言方案
Jan 29 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
JavaScript中toString()方法的使用详解
Jun 05 #Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 #Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 #Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 #Javascript
简介JavaScript中Boolean.toSource()方法的使用
Jun 05 #Javascript
判断访客终端类型集锦
Jun 05 #Javascript
JavaScript中constructor()方法的使用简介
Jun 05 #Javascript
You might like
php中$this->含义分析
2009/11/29 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
JavaScript自执行函数和jQuery扩展方法详解
2017/10/27 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
编写类String 的构造函数、析构函数和赋值函数
2012/09/09 面试题
SQL面试题
2013/04/30 面试题
在求职信中如何凸显个人优势
2013/10/30 职场文书
小学信息技术教学反思
2014/02/10 职场文书
法制宣传教育方案
2014/05/09 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
党员证明模板
2015/06/19 职场文书