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 相关文章推荐
angularjs中的e2e测试实例
Dec 06 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 Javascript
VUEJS实战之构建基础并渲染出列表(1)
Jun 13 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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+ajax实时聊天室
2016/07/20 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
node.js中的fs.appendFileSync方法使用说明
2014/12/17 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Python学习小技巧之列表项的推导式与过滤操作
2017/05/20 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
设计师家具购买和委托在线市场:Viyet
2016/11/16 全球购物
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
品酒会策划方案
2014/05/26 职场文书
面试通知邮件
2015/04/20 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技