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. python目标定位（借鉴csdn上大神）

    写博客是为了记录下来,毕竟好多东西记不住,看过就忘了,收藏又太多,还不如搬运到自己博客下面,随时可翻~~~ 近期再学目标识别与定位,看着原理都很简单,但是真自己做,又觉得困难重重. csdn上一个大神 ...

  2. 【转】【Linux】Linux下统计当前文件夹下的文件个数、目录个数

    [转][Linux]Linux下统计当前文件夹下的文件个数.目录个数 统计当前文件夹下文件的个数,包括子文件夹里的 ls -lR|grep "^-"|wc -l 统计文件夹下目录的 ...

  3. k64 datasheet学习笔记11---Port Control and Interrupts (PORT)

    1.前言 Port Control and Interrupt (PORT)  模块提供了port control,digital filtering,和外部中断功能 每个pin的大部分功能可被独立配 ...

  4. RTL8201EL介绍【转】

    转自:https://blog.csdn.net/Firefly_cjd/article/details/79826698 本文为博主原创文章,未经博主允许不得转载. https://blog.csd ...

  5. android dm-verity 功能【转】

    转自:https://blog.csdn.net/ee230/article/details/73348344 Android dm-verity 实现原理深入研究 思维导图: dm-verity 说 ...

  6. 使用 Charles 抓取 App 网络请求

    最近开发App的时候需要用到大量其他应用的数据,但接口不公开,所以想到了抓取.差不多要读到5W的用户数据,采用的是找到数据接口,然后不停发请求的方式.用到的抓取工具是Charles,本文讲解的应用是W ...

  7. python 函数 动态参数 和嵌套

    1.动态参数 是可以接收任意的参数.一种方式, 1,位置的动态传参, 写法是: *参数名 接收的参数是tuple类型举个例子:def yue(*food): print(food)yue(" ...

  8. Ex 2_14 去掉数组中所有重复的元素..._第二次作业

    首先利用归并排序算法对数组进行排序,时间复杂度为O(nlogn),接着再利用时间复杂度为O(n) 的去重复算法去掉数组中的重复元素.总的时间复杂度为O(nlogn). (这题应该用分支算法解决)以下为 ...

  9. 【原创】大叔经验分享（38）beeline连接hiveserver2报错impersonate

    beeline连接hiveserver2报错 Error: Could not open client transport with JDBC Uri: jdbc:hive2://localhost: ...

  10. js浏览器判断函数

    function userBrowser(){ var browserName=navigator.userAgent.toLowerCase(); if(/msie/i.test(browserNa ...