YprogressBar,html5进度条样式,js进度条插件
简介
YprogressBar是一款基于HTML5的进度条插件。
YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动态显示更详细的执行信息,比如上传速度、剩余时间等等。
YprogressBar代码书写简洁,结构设计合理,不会给您的系统带来不良影响。
界面预览
使用说明
文件引用
只需引用yprogressbar.css和yprogressbar.js文件即可。
使用概览
var ypb = new YprogressBar({
title: "正在上传文件...",
des: "上传速度:{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",
closeable: true,
cancelCallback: function(rate, vars){
console.log(rate);
console.log(vars);
}
});
ypb.show();
实例化参数说明
为了尽显面向对象逼格,要想使用YprogressBar,总得实例化一下吧,而实例化的时候,是需要一些参数的,整体上就是一个object,具体参数接下来一一说明。
title
进度条标题,说明下这个进度条是干嘛的。
des
对要做的事情进行更详细的描述,可以直接写一句话。
有时候我们想搞点花样,比如说显示上传速度、剩余时间什么的,YprogressBar完全支持你这样做,只需要在描述中加入变量即可,格式:{{y:name}}。
例如:des: "上传速度:{{y:speed}}MB/秒 剩余时间约{{y:second}}秒",这里的{{y:speed}}和{{y:second}}就是变量。
如果此处指定了变量,在做update操作时,必须在第二个参数中指定变量的值。
closeable
销毁回调。YprogressBar一旦被销毁,无论是手动调用destroy方法,还是用户点击关闭按钮,都会触发此回调。
回调触发时,会传入两个参数,分别是:当前执行进度、此刻描述中的参数值(object中包含name、value)。
show方法
无需任何参数。
调用show方法后进度条才会显示。
update方法
更新进度,两个参数。
第一个参数是当前进度,直接用数字表示,例如:26,代表26%。
第二个参数是一个object,需要包含描述中所有变量的值。如果描述中无变量,此参数可以忽略。
例如:
ypb.update(26,{
speed: 312,
second: 5
});
destroy方法
销毁进度条,释放内存。
YprogressBar,html5进度条样式,js进度条插件的更多相关文章
- WPF实现斜纹圆角进度条样式
原文:WPF实现斜纹圆角进度条样式 运行效果: 进度条样式: <!--进度条样式--> <LinearGradientBrush x:Key="ProgressBar.Pr ...
- UINavigationBar统一修改导航条样式
#pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...
- 网站顶部显示预加载进度条preload.js
网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...
- 轻量级进度条 – Nprogress.js
进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...
- 最简单的android自定义进度条样式
一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8&quo ...
- Android多种样式的进度条
原创 2016年04月26日 16:46:35 标签: android / clip / 进度条 / 8473 编辑 删除 ---- The mark of the immature man is t ...
- QT QProgressBar QProgressDialog 模态,位置设置,无边框,进度条样式
一 关于模态设置 QProgressDialog可以设置模态(需要在new的时候传入parent),QProgressBar设置不好: 只有dialog可以设置模态,widget不能设置模态(QPr ...
- js进度条源码下载—js进度条代码
现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...
- 超赞的CSS3进度条 可以随进度显示不同颜色
原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...
随机推荐
- C# 在winform或者wpf中显示控制台窗口
这儿需要使用两个系统函数: BOOL WINAPI FreeConsole(void); //// 关闭控制台窗口,参考:http://msdn.microsoft.com/en-us/library ...
- 修改win7电脑中所有文件的默认查看方式
怎么修改win7电脑中所有文件的默认查看方式 如何设置才可以得到如下的效果:比如说打开一个盘符或者一个文件夹,进行设置之后,这个盘符里或者这个文件夹下的所有子文件夹.所有子文件夹里的所有文件都以“ ...
- jQuery .css color 重写 :hover样式没了
$("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...
- <<UML大战需求分析>>阅读笔记(2)
<<UML大战需求分析>>阅读笔记(2)> 此次读了uml大战需求分析的第三四章,我发现这本书讲的特别的好,由于这学期正在学习设计模式这本书,这本书就讲究对uml图的利用 ...
- C语言通过timeval结构设置周期
在C语言中,我们经常需要设置一个时间周期.在这里,我们通过Timeval结构实现时间周期的设置.首先,我们介绍timeval,其定义如下(转载http://www.cnblogs.com/wainiw ...
- AVL-tree
//avl.h#ifndef __AVL_H__#define __AVL_H__ typedef int KEY_TYPE; /* struct */typedef struct AVL{ KEY_ ...
- python中文编码
前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题 ...
- Framework manager编写SQL错误整理
BMT-MD-0059 这个报错是由于导入了表全部的列,而之引用了部分列,所以未被引用的列将要被删除 XQE-PLN-0248 在模型中找不到“MONTHLY_FORECAST_FACT”的列“mon ...
- oracle exists
公司项目中有用到exists,感觉挺有用的,拷贝一些感念的东西. “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T ...
- [UCSD白板题] The Last Digit of a Large Fibonacci Number
Problem Introduction The Fibonacci numbers are defined as follows: \(F_0=0\), \(F_1=1\),and \(F_i=F_ ...