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. EasyGui的一个小例子

    EasyGui的安装:首先下载easyGui安装包,地址链接:https://pan.baidu.com/s/1D8f_eXWn7l8xhcTuEsqZmA 密码:e5z5 安装步骤: 1.进入eas ...

  2. python第七天，dict

    在python里边创建字典的方法有如下几种: >>> dict1= dict(((),(),(),(),())) >>> print(dict1) {, , , , ...

  3. 2017-2018-2 20165231实验二《Java面向对象程序设计》实验报告

    实验报告封面 课程:Java程序设计 班级:1652班 姓名:王杨鸿永 学号:20165231 指导教师:娄嘉鹏 实验日期:2018年4月16日 实验时间:13:45 - 15:25 实验序号:实验二 ...

  4. Nginx range filter模块数字错误漏洞修复 (Nginx平滑升级) 【转】

    对线上生产环境服务器进行漏洞扫描, 发现有两台前置机器存在Nginx range filter模块数字错误漏洞, 当使用nginx标准模块时,攻击者可以通过发送包含恶意构造range域的header ...

  5. mq for aix 清理步骤

    删除所有相关进程smit remove 删除mq删除mqm用户和用户组 如果unmount /cdrom 卸载不掉的话使用 fuser -xcu /cdrom rm /var/mqm

  6. win32编程中消息循环和WndProc（）窗口过程函数

    原文地址:https://blog.csdn.net/zxxSsdsd/article/details/45504383 在win32程序的消息循环函数中  while (GetMessage (&a ...

  7. $Django 数据库图片渲染设计 站点设计 截断函数

    1.数据库图片渲染设计 1.模型层 class User_info (AbstractUser): head_img = models.FileField (upload_to='test', def ...

  8. MySQL MyISAM引擎转换为InnoDB操作记录

    进入mysql命令行模式: # mysql -uroot -ppwd 1.查看mysql提供什么存储引擎: mysql> show engines; 2.查看mysql当前提供的默认存储引擎: ...

  9. Confluence 6 Windows 中以服务方式自动重启的原因

    针对长时间使用的 Confluence,我们推荐你配置 Confluence 自动随操作系统重启而启动.针对一些 Windows 的服务器,这意味着需要让 Confluence 以服务的方式运行. 有 ...

  10. Confluence 6 Microsoft SQL Server 设置准备

    在开始前,请检查: 请查看 Supported Platforms 页面来获得 Confluence 系统支持的 SQL Server 数据库版本.你需要在安装 Confluence 之前升级你的 O ...