JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

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 来修改最小百分比。

s.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作,需要一个包含 role='bar' 属性的元素。

BACkground-color: #ffffff">NProgress.configure({ template: "..." });

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed (毫秒ms)。

s.configure({ ease: 'ease',speed: 500 });

想关闭进度条步进?设置 trickle 为 false。

s.configure({ trickle: false });

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔,单位毫秒ms).

s.configure({ trickleRate: 0.02,trickleSpeed: 800 });

想禁用进度环?设置 showSpinner 为 false。

s.configure({ showSpinner: false });

在线演示

源码下载

大佬总结

以上是大佬教程为你收集整理的jquery插件NProgress.js制作网页加载进度条全部内容,希望文章能够帮你解决jquery插件NProgress.js制作网页加载进度条所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:进度条