插件使用一进度条---nprogress
nprogress 是像youtube一样在顶部出现进度条，用在一些加载比较缓慢的场景中。
官方网站是 http://ricostacruz.com/nprogress/
源码在 https://github.com/rstacruz/nprogress
使用方法：
1、引入jquery库
|
1
|
|
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的更多相关文章
- 轻量级进度条 – Nprogress.js
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...
- 前端轻量级web进度条 – Nprogress & nanobar
转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...
- Vue中使用NProgress实现进度条
简介 NProgress是页面跳转或者发生异步请求是浏览器顶部的进度条 GitHub地址:https://github.com/rstacruz/nprogress 在线演示地址:http://ric ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- nprogress进度条和ajax全局事件
nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz ...
- npropress进度条插件的使用
官网下载地址:http://ricostacruz.com/nprogress/ npropress.css /* Make clicks pass-through */ #nprogress { p ...
- ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆 ...
- Vue项目页面跳转时候的，浏览器窗口上方的进度条显示
1.安装: cnpm install --save nprogress 2.在main.js中引入: import NProgress from 'nprogress' import 'nprogre ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
随机推荐
- SQL操作json类型数据的函数
MySQL5.7之后对json数据格式进行了函数支持 Json_contains(字段名, '值') 1.表中json格式的某个字段 2.json里的某个键值 Json_search(字段名, 'on ...
- git 上传代码
1.注册GitHub账号 2.在GitHub上建立github仓库 3.下载git 4.配置git 5.生成SSH密钥,并把密钥添加SSH密钥到GitHub上 6.创建本地仓库并上传代码到github ...
- nodejs -Promise
创建一个 readFile.js,读取三个文件abc的内容并输出到控制台 var fs = require('fs') fs.readFile('./a.txt','utf-8',function ( ...
- 数字图像处理的Matlab实现（2）—MATLAB基础
第2章 MATLAB编程基础 2.1 M-文件 MATLAB中的M-文件可以是简单执行一系列MATLAB语句的源文件,也可以是接收自变量并产生一个或多个输出的函数. M-文件由文本编辑器创建,并以fi ...
- rocketmq的name server启动时的jvm参数配置
-Xms2g -Xmx2g -Xmn1g //设置年轻代大小 -XX:MetaspaceSize=128m //持久代的初始大小 -XX:MaxMetaspaceSize=320m //持久代的上限 ...
- Centos6.8上httpd配置腾讯云SSL证书
(1)先按装mod_ssl yum -y install mod_ssl /etc/httpd/conf.d/下会有一个ssl.conf的文件,打开 a)检测本地证书配置是否正确 主要是看下证书及密钥 ...
- hibernate框架学习之数据查询（QBC）
lQBC(Query By Criteria)是一种Hibernate中使用面向对象的格式进行查询的计数 lQBC查询方式步骤 •获取Session对象 •初始化Criteria对象(使用Sessio ...
- Codeforces 1091E New Year and the Acquaintance Estimation Erdős–Gallai定理
题目链接:E - New Year and the Acquaintance Estimation 题解参考: Havel–Hakimi algorithm 和 Erdős–Gallai theore ...
- pl sql 中文乱码
一:查看oracle数据库的字符集编码: select * fromnls_database_parameters where parameter in ('NLS_LANGUAGE', 'NLS_T ...
- js -- sort() 使用排序函数
JavaScript sort() 方法 JavaScript Array 对象 定义和用法 sort() 方法用于对数组的元素进行排序. 语法 arrayObject.sort(sortby) 参数 ...