GitHub上24.3kStar的js进度条插件,确定不关注一下?

GitHub上24.3kStar的js进度条插件,确定不关注一下?如果你经常使用GitHub,那应该会注意到GitHub点击链接后,会在网页的顶部出现一个进度条虽然用css3写一个,也是分分钟的事情。但是本着不重复造轮子的想法,找到了NProgress这个插件。nprogress的安装支持直接script标签引用和npm包安装script引用<scriptsrc='nprogress.js'></script><linkrel='stylesheet'href='nprogress.css&#3

在web应用开发中,有很多加载资源或者网络等待的场景需要在界面上做一个加载动画,让用户知道你这个应用程序正在运行而不是已经挂掉了。

应用场景

如果你经常使用GitHub,那应该会注意到GitHub点击链接后,会在网页的顶部出现一个进度条

GitHub上24.3kStar的js进度条插件,确定不关注一下?

虽然用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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注