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. mysql for linux6.8单机版安装

    主机名以及hostname文件修改 vi /etc/hosts vi /etc/sysconfig/network hostname mysql01 系统参数修改 设置用户资源限制 vi /etc/s ...

  2. 超级简单的Android Studio jni 实现(无需命令行)【转载】

    原文: http://www.jianshu.com/p/e689d0196a17 1.配置Anroid Studio(这步是关键) 使用[command+,] 打开Preferences,选择Ext ...

  3. 动态规划 - 213. House Robber II

    URL: https://leetcode.com/problems/house-robber-ii/ You are a professional robber planning to rob ho ...

  4. 【转】python之模块array

    [转]python之模块array >>> import array#定义了一种序列数据结构 >>> help(array) #创建数组,相当于初始化一个数组,如: ...

  5. UVALive 8513 lovers 2017 西安区域赛 B 贪心+multiset

    UVALive 8513 有2种人,每个人有自己的权值$A_i$ $B_i$ 当$A_i + B_i >=K$时 两个人可以配对 问最多多少人可以配对 解法 : 把$/{ A_i /}$ 排序 ...

  6. OpenStack实践系列⑧可视化服务Horizon之Dashboard演示

    OpenStack实践系列⑧可视化服务Horizon之Dashboard演示 七.可视化服务Horizon之Dashboard演示 仪表板依赖于功能核心服务,包括身份,图像服务,计算和网络两种(neu ...

  7. 2-HTML Text Formatting Elements

    下表列举了文字格式常见的关键字 Tag Description <b> Defines bold text <em> Defines emphasized text  < ...

  8. C语言实现程序跳转到绝对地址0x100000处执行

    嵌入式笔试题:想让程序跳转到绝对地址0x100000处执行,该如何做? 请详细解释一下所给的答案: 网上看到有如下答案: *((void(*)(void))0x100000)(); 经过在VC++6. ...

  9. HNU 2015暑期新队员训练赛2 H Blanket

    把每个 bi *x + ri ( 0 <= ri <= ai)标记, 输出被标记 0 – N 次的个数 #include<iostream> #include<cstdi ...

  10. ActiveMQ-为什么需要消息中间件？

    消息中间件的优势 UNIX的进程间通信就开始运用消息队列技术,一个进程将数据写入某个特定的队列中,其它进程可以读取队列中的数据,从而实现异步通信.对于如今的分布式系统,消息队列已经演变为独立的消息中间 ...