在web应用开发中,有很多加载资源或者网络等待的场景需要在界面上做一个加载动画,让用户知道你这个应用程序正在运行而不是已经挂掉了。
应用场景
如果你经常使用GitHub,那应该会注意到GitHub点击链接后,会在网页的顶部出现一个进度条
虽然用css3写一个,也是分分钟的事情。但是本着不重复造轮子的想法,找到了NProgress这个插件。
如何使用?
安装
nprogress的安装支持直接script标签引用和npm包安装
script引用
<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>或者也可以直接使用cdn https://unpkg.com/nprogress@0.2.0/nprogress.js https://unpkg.com/nprogress@0.2.0/nprogress.css
npm安装
npm install --save nprogress
使用
简单使用
nprogress使用方式非常的简单
NProgress.start();
NProgress.done();
高级用法
使用set函数可以设置进度条的位置,支持0-1之间
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
inc()
函数会随机增加进度条的进度,但是永远不会到达100%,除非你调用了done()函数
NProgress.inc();
自定义NProgress的样式
nprogress的样式只有一个简单的css文件,可以很方便的自定义修改
github地址:https://github.com/rstacruz/nprogress
今天的文章GitHub上24.3kStar的js进度条插件,确定不关注一下?分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29403.html