nprogress 转
转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html
前言
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式。NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便。轩枫阁用过Nprogress,用于页面刚打开时的页面加载进度显示。
官网
NProgress.js:http://ricostacruz.com/nprogress/
nanobar.js:http://nanobar.micronube.com/
1. NProgress
简介
轻量级的ajax进度条应用,灵感来自Google, YouTube, and Medium。
纳米级的进度条。 具有逼真的动画涓涓细流来说服你的用户,something is happen!
安装
引入nprogress.js和nprogress.css到项目中。
基本用法
只需要调用start() 和 done()来控制进度条
1
2
|
NProgress.start();
NProgress.done();
|
高级用法
百分比:通过设置progress的百分比,调用 .set(n)来控制进度,其中n的取值范围为0-1。
1
2
3
|
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
|
递增:要让进度条增加,只要调用 .inc()。这会产生一个随机增量,但不会让进度条达到100%。此函数适用于图片加载或其他类似的文件加载。
1
|
NProgress.inc();
|
强制完成:通过传递 true 参数给done(),使进度条满格,即使它没有被显示。
1
|
NProgress.done(true);
|
配置
minimum:设置最低百分比
1
|
NProgress.configure({minimum:0.1});
|
template:改变进度条的HTML结构。为保证进度条能正常工作,需要元素拥有role=’bar’属性。
1
2
3
|
NProgress.configure({
template:"<div class='....'>...</div>"
});
|
ease:调整动画设置,ease可传递CSS3缓冲动画字符串(如ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier)。speed为动画速度(单位ms)。
1
|
NProgress.configure({ease:'ease',speed:500});
|
更多用法
https://github.com/rstacruz/nprogress
2. nanobar
简介
非常非常轻量级的进度条,压缩过后仅有730字节。不需要引入jQuery。
兼容性:IE8和the rest of the world
安装
下载最新版本:https://github.com/jacoborus/nanobar/archive/master.zip
通过安装包管理器安装:
1
|
$bower install nanobar
|
npm:
1
|
$npm install nanobar
|
使用
在项目中引入nanobar.js即可。
1
|
<script src="path/to/nanobar.js"></script>
|
进度创建
1
|
varnanobar=newNanobar(options);
|
参数
bg <String>:(可选)CSS背景颜色属性,默认为”#000″即黑色。
id <String>:(可选)nanobar的div的id
target <DOM Element>:设置防止进度条HTML代码的位置,若target为空则会固定到document的顶部位置。
进度运动
nanobar.go(percentage):调整进度
percentage <Number>:nonabar的百分比,取值为0-100
例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
varoptions={
bg:'#acf',
// leave target blank for global nanobar
target:document.getElementById('myDivId'),
// id for new nanobar
id:'mynano'
};
varnanobar=newNanobar(options);
//move bar
nanobar.go(30);// size bar 30%
// Finish progress bar
nanobar.go(100);
|
Bootstrap进度条组件
CSS样式:http://v3.bootcss.com/components/#progress-animated
nprogress 转的更多相关文章
- NProgress.js template
NProgress.js:加载进度条:http://ricostacruz.com/nprogress/ 基础的这几个方法 这个网站上都有 我在一个地方看到这个代码 NProgress.configu ...
- pace.js和NProgress.js两个加载进度插件的一点小总结
这两个插件都是关于加载进度动画的,应该说各有特点吧,最起码对我来说是各有优势的.今天一天就捣鼓了加载进度动画,也研究了大量的(也就这两个)加载进度动画,也算对加载进度动画有了一个初步的了解了吧. NP ...
- 前端轻量级web进度条 – Nprogress & nanobar
转载:http://www.xuanfengge.com/front-end-nprogress-and-lightweight-web-progress-bar-nanobar.html 前言 进度 ...
- 插件使用一进度条---nprogress
nprogress 是像youtube一样在顶部出现进度条,用在一些加载比较缓慢的场景中. 官方网站是 http://ricostacruz.com/nprogress/ 源码在 https://gi ...
- vue使用nprogress页面加载进度条
vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...
- NProgress.js加载进度插件的简单实用方法
NProgress.js 说明: NProgress是基于jquery的,且版本要 >1.8 下载地址: https://github.com/rstacruz/nprogress API: N ...
- nprogress进度条和ajax全局事件
nprogress和ajax全局事件 nprogress 官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz ...
- 在vue中使用nprogress
NProgress的官网:http://ricostacruz.com/nprogress/ 源码地址:https://github.com/rstacruz/nprogress 1.安 ...
- nprogress.js 头部进度条使用方法
nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...
- element admin中使用nprogress实现页面加载进度条
主要是知道是nprogress这个组件实现的就可以了,组件的使用方法可参考:https://blog.csdn.net/ltr15036900300/article/details/47321217 ...
随机推荐
- HTML_CSS使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- webservice - 使用JAX-WS注解的方式快速搭建服务端和客户端
1.Define the interface import javax.jws.WebMethod; import javax.jws.WebParam; import javax.jws.WebRe ...
- 搜索框下面显示提示数据(数据是ajax读取)
1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...
- redis笔记_源码_简单动态字符串SDS
参照:https://zcheng.ren/sourcecodeanalysis/theannotatedredissourcesds/#sds%E5%B0%8F%E7%BB%93 这里用char b ...
- 计算几何——poj1410,线段不规范交
直接用kuangbin的板子,能判不规范,规范和不交 另外线段在矩形内也可以,判断方式是比较线段的端点和矩形四个角 #include <cstdio> #include <cmath ...
- springboot集成websocket实现向前端浏览器发送一个对象,发送消息操作手动触发
工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码 ...
- spark启动后出现“JAVA_HOME not set” 异常和"org.apache.hadoop.security.AccessControlException"异常
/home/bigdata/hadoop/spark-2.1.1-bin-hadoop2.7/sbin/start-all.sh 启动后执行jps命令,主节点上有Master进程,其他子节点上有Wor ...
- memcpy函数实现中的优化
今天浏览Google面试题的时候,有看到一个memcpy的实现,以及如何去优化memcpy. 我对memcpy的实现的记忆就是,拷贝的时候需要从后往前拷贝,为何防止内存重叠. 但是如果去优化它我没有想 ...
- linux大神
http://blog.csdn.net/skykingf/article/category/780616
- 多线程的基本概念和Delphi线程对象Tthread介绍
多线程的基本概念和Delphi线程对象Tthread介绍 作者:xiaoru WIN 98/NT/2000/XP是个多任务操作系统,也就是:一个进程可以划分为多个线程,每个线程轮流占用CPU运行 ...