千家信息网

progress.js如何安装使用

发表于:2024-11-14 作者:千家信息网编辑
千家信息网最后更新 2024年11月14日,这篇文章给大家分享的是有关progress.js如何安装使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Progressjs是个JavaScript和css3库,帮助开发
千家信息网最后更新 2024年11月14日progress.js如何安装使用

这篇文章给大家分享的是有关progress.js如何安装使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  Progressjs是个JavaScript和css3库,帮助开发者创建网页上每个对象的管理进度条。支持页面元素、图像、视频、文本输入等,用户可以自定义进度条模板,而且很方便使用。

  progress.js安装使用

  //tosetprogress-barforwholepage

  progressjs().start();

  //orforspecificelement

  progressjs("#targetElement").start();

  progress.js的使用方法

  NProgress.start()-显示进度条

  NProgress.set(0.4)-设置百分比

  NProgress.inc()-增加一点点

  NProgress.done()-完成进度条

  你也可以...

  添加到你调用Ajax的地方!绑定它到jQueryajaxStart和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});

感谢各位的阅读!关于"progress.js如何安装使用"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

0