在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进度条插件，确定不关注一下？相关推荐

js进度条插件pace.js
主要用到themes文件夹和pace.js文件转载于:https://www.cnblogs.com/loveMis/p/10985518.html
前端js华为云obs上传下载文件与进度条的设置
前端js华为云obs上传下载文件与进度条的设置首先下载OBS BrowserJS SDK安装包用git将代码拉到本地 git clone https://github.com/huaweiclou ...
js实现图片上传预览及进度条
js实现图片上传预览及进度条原文js实现图片上传预览及进度条最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器 ...
使用jquery.fileupload.js上传文件时添加进度条
1.首先页面用来展示上传按钮和显示进度条的 <tr><td style="width:140px;text-align: right;padding-top: 13px ...
pace.js网页自动加载进度条插件-好东西
pace.js – 网页自动加载进度条插件源码地址 https://github.com/HubSpot/pace 入Pace.js以及主题文件 Pace.js公开的API列表, Pace.star ...
JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
分享21个JS抽奖转盘特效，36个JS表单验证，31个JS进度条，总有一款适合您
分享21个JS抽奖转盘特效,36个JS表单验证,31个JS进度条,总有一款适合您下载链接:https://pan.baidu.com/s/1TWOGqes5J2baelO9qdItXg?pwd=ma ...
NProgress.js进度条
目录一.代码二.效果演示一.代码 <!DOCTYPE html> <html lang="en"><head><meta chars ...
Webpack 插件: webpackbar progress-bar-webpack-plugin 进度条插件分享
Webpack 插件: webpackbar & progress-bar-webpack-plugin 进度条插件分享文章目录 Webpack 插件: webpackbar & p ...

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

应用场景

如何使用？

安装

高级用法

GitHub上24.3kStar的js进度条插件，确定不关注一下？相关推荐

最新文章

热门文章