nprogress 是像youtube一样在顶部出现进度条，用在一些加载比较缓慢的场景中。

官方网站是 http://ricostacruz.com/nprogress/

源码在 https://github.com/rstacruz/nprogress

使用方法：

1、引入jquery库

2、引入css和js

1
2
<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

3、使用

在<body>开始标签使用启动

1
NProgress.start();

在</body>结束标签使用完成

1
NProgress.done();
 
<!DOCTYPE html5>

<html>

	<head>

		<title>进度条</title>

		<meta charset="UTF-8" />

		<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>

		<link rel='stylesheet' href='nprogress.css'/>

		<script src='nprogress.js'></script>

		<style type="text/css">

		</style>

	</head>

	<body><script>NProgress.start();</script>

	<button>点我</button>

	<script>

	</script>

	</body ><script>NProgress.done();</script>

</html>

　　

插件使用一进度条---nprogress的更多相关文章

  1. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  2. 前端轻量级web进度条 – Nprogress & nanobar

    转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...

  3. Vue中使用NProgress实现进度条

    简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...

  4. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  5. nprogress进度条和ajax全局事件

    nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz ...

  6. npropress进度条插件的使用

    官网下载地址:http://ricostacruz.com/nprogress/ npropress.css /* Make clicks pass-through */ #nprogress { p ...

  7. ProgressBar.js – 漂亮的响应式 SVG 进度条

    ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...

  8. Vue项目页面跳转时候的，浏览器窗口上方的进度条显示

    1.安装: cnpm install --save nprogress 2.在main.js中引入: import NProgress from 'nprogress' import 'nprogre ...

  9. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

随机推荐

  1. oracle dblink的创建与使用

    一.什么是DBLINK dblink,顾名思义就是数据库的链接. 当我们要跨本地数据库访问另一个数据库中的表的数据时,在本地数据库中就必须要创建远程数据库的dblink,通过该dblink就可以达到访 ...

  2. python,类和对象（一）

    万物皆对象,在python中也存在对象,首先我们需要知道面向对象的三大特征封装.继承.多态. 封装就是将一种或多种杂乱无序的代码进行有序的分类封装. 继承可以理解为孩子会继承父亲所有的东西. 多态可以 ...

  3. img大小和background-size

    img 不设置img标签的width和height,将显示图片真实大小 只设置width或height,另一个将按比例自动缩放 设置了width和height,将按设置的大小来显示 img图片自适应( ...

  4. Elasticsearch 5.4.3实战--Java API调用：搜索建议

    通常的搜索引擎,都会根据用户的输入,实时给予匹配的提示. 那么这个功能在elasticsearch中如何实现呢? Elasticsearch里设计了4种类别的Suggester,分别是: Term S ...

  5. CentOS6.6 双网卡双网关配置

    1.需求: 内网IP:10.63.215.7 网关:10.63.215.254 外网IP:180.168.29.92 网关:180.168.29.89 内外网均可以Ping通,可直接访问 2.IP配置 ...

  6. Django：前后端分离后联调给前端传数据

    实现前后端分离后,有了下面几点改变: 1.服务器一分为二,前后端分别部署,静态资源放在前端服务器,业务代码放在后的服务器 2.前端服务器需要接收Http请求(一般使用node.js) 3.前端服务器需 ...

  7. RabbitMQ：MSVCR120.dll ，c000001d 错误

    今天在win7上面安装RabbitMQ,安装过程没有问题,但是RabbitMQ无法启动,错误如下: 今多方查找,原因在于win7没有安装SP1的补丁包,安装完成后,启动RabbitMQ就没有问题了. ...

  8. 关于在Fragment中设置toolbar及菜单的方法

    在NoActionBar的主题中onCreateOptionsMenu方法不会运行,这里就需要将toolbar强制转换为ActionBar 在加入toolbar的监听之类后需要在onCreateVie ...

  9. cache、session、cookie的区别

    session把数据保存在服务器端,每一个用户都有属于自己的Session,与别人的不冲突就是说,你登陆系统后,你的信息(如账号.密码等)就会被保存在服务器上一个单独的session中,当你退出系统后 ...

  10. python2x 和 python 3x的区别

    1,大环境: python2x: 大神贡献源码,这些源码有自己语言的特色,源码不规范,源码重复代码太多. python崇尚的是优美清晰简单. python3x: 龟叔重新整理,将源码规范化,简单化,统 ...