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. 【多线程补充】SimpleDateFormat非线程安全与线程中、线程组中异常的处理

    1.SimpleDateFormat非线程安全的问题 类SimpleDateFormat主要负责日期的转换与格式化,但在多线程环境中,使用此类容易造成数据转换及处理的不正确,因为SimpleDateF ...

  2. 【ARTS】01_20_左耳听风-20190325~20190331

    zz## ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 ...

  3. MVC 中Delete 方法报错问题解决方案

    最开始前台ajax提交时代码 function Del(id) { $.ajax({ type: "GET", url: "/Test/Delete", dat ...

  4. boost 随机数发生器

    Random     随机数 在很多应用中都需要使用随机数.本库力求提供一个高效的,通用的随机数库.boost库有多种随机数生成方式.先熟悉一下各种随机数生成器的概念. 数字生成器(Number Ge ...

  5. WebSocket参考

    websocker是一种网页和服务端建立tcp全双工通信的技术,可以不再让页面进行向服务器发送轮询请求. 需要注意使用的场景,如果建立的tcp过多的话,会对服务器有很大压力. WebSocket前后台 ...

  6. git bash的命令

    git bash cd /f   该命令可以把当前目录切换到f盘 git clone git上的项目的url

  7. [转]PhpStorm快捷键大全

    1 前言 PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstro ...

  8. 13)django-ORM(连表一对多，外键创建，创建数据，3种查询)

    一对多需要使用外键 一:外键创建ForeignKey b=models.ForeignKey(to="Business",to_field=("id"))#dj ...

  9. android系统下消息推送机制

    一.推送方式简介: 当前随着移动互联网的不断加速,消息推送的功能越来越普遍,不仅仅是应用在邮件推送上了,更多的体现在手机的APP上.当我们开发需要和服务器交互的应用程序时,基本上都需要获取服务器端的数 ...

  10. STM32L476应用开发之二：模拟量数据采集

    采集模拟量数据在一台一起中是必不可少的功能.在本次实验中我们要采集的模拟量值主要包括氧气传感器的输出以及压力变送器的输出. 1硬件设计 我们需要采集数据对精度有一定的要求,而STM32L476自带AD ...