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. VMware网络问题

    配置好网络的虚拟机,隔一段时间后可能会发现网络不可用了,此时可以检查一下以下3个服务是否开启 一般情况下,启动以上三个服务后网络就通了. 如果以上服务都启动了还不行,那就重启一下网络: # servi ...

  2. Python3-线程

    线程 什么是线程 线程的创建开销小 线程与进程的区别 为何要用多线程 多线程的应用举例 开启线程的两种方式 在一个进程下开启多个线程与在一个进程下开启多个子进程的区别 多线程并发的socket服务器 ...

  3. Visual Studio VS2010统计代码行数

    按CTRL+SHIFT+F (Find in files),勾上支持正则表达式,然后输入搜索内容: ^:b*[^:b#/]+.*$ 以上表达式的统计可做到:#开头和/开头或者空行都不计入代码量.如果需 ...

  4. javascript动态的改变checkbox的选中状态

    <td> <div class="checkbox"> <label> <input type="checkbox" ...

  5. lua 中随机数产生

    需要用到两个函数: (1)math.randomseed(N):  接收一个整数N作为随机序列种子 (2)math.random([n, [m]]): 这个函数有三种用法,分别是不跟参数,此时产生(0 ...

  6. go import 使用方法记录

    import "fmt"      最常用的一种形式 import "./test"   导入同一目录下test包中的内容 import f "fmt ...

  7. LA 6893 矩阵HASH （模板）

    #include<stdio.h> #include<string.h> typedef unsigned long long ULL; ; ; int test,n,m,x, ...

  8. 玩转EhCache之最简单的缓存框架

    二.主要特性 快速: 简单: 多种缓存策略: 缓存数据有两级:内存和磁盘,因此无需担心容量问题: 缓存数据会在虚拟机重启的过程中写入磁盘: 可以通过 RMI.可插入 API 等方式进行分布式缓存: 具 ...

  9. Solidity(address的四个方法)

    address的四个方法send,call,callcode,delegatecall 例子:发送以太币的send方法//下面是send方法,涉及到以太币的情况可能用到payable,senddemo ...

  10. Codeforces 1093E Intersection of Permutations [CDQ分治]

    洛谷 Codeforces 思路 一开始想到莫队+bitset,发现要T. 再想到分块+bitset,脑子一抽竟然直接开始写了,当然也T了. 最后发现这就是个裸的CDQ分治-- 发现\(a\)不变,可 ...