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. 对象及变量的并发访问(同步方法、同步代码块、对class进行加锁、线程死锁)&内部类的基本用法

    主要学习多线程的并发访问,也就是使得线程安全. 同步的单词为synchronized,异步的单词为asynchronized 同步主要就是通过锁的方式实现,一种就是隐式锁,另一种是显示锁Lock,本节 ...

  2. SpringTask定时任务的使用

    实现定时任务简单的有四种方式:Timer\ScheduledThreadPool线程池\quartz(常用),还有另一种就是springtask. 都说springtask上手简单,于是简单的研究一下 ...

  3. 使用SpringSocial开发QQ登录

    ⒈编写QQ用户对应的数据结构 package cn.coreqi.social.qq.entities; /** * 封装QQ的用户信息 */ public class QQUserInfo { /* ...

  4. platform模块

    import platform ''' python中,platform模块给我们提供了很多方法去获取操作系统的信息 如: import platform platform.platform() #获 ...

  5. ifconfig相关参数及用法说明

    一.ifconfig ifconfig 主要是可以手动启动.观察与修改网络接口的相关参数,可以修改的参数很多,包括 IP 参数以及 MTU 等都可以修改,它的语法如下: [root@linux ~]# ...

  6. git与eclipse集成之导入组件到Eclipse工程

    从工作目录中选择要导入的组件,右键选择:Import Projects,弹出窗口如下图所示,选择Import as general project 点击next,修改或使用默认的组件名称 点击fini ...

  7. centos6.5环境wget报错Unable to establish SSL connection

    centos6.5环境wget报错Unable to establish SSL connection [root@centossz008 src]# wget --no-check-certific ...

  8. Jquyer table 中的数据分页

    直接上代码,复制出来就可以使用 <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  9. JS将图片转换成Base64码

    直接上代码 html页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  10. 微信小程序—获取用户网络状态和设备的信息

    这个是一个简易教程,按照他的步骤下载好了,打开界面看到的效果是如下的: