简介

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方法

销毁进度条,释放内存。

View On Github

Show Demo

YprogressBar,html5进度条样式,js进度条插件的更多相关文章

  1. WPF实现斜纹圆角进度条样式

    原文:WPF实现斜纹圆角进度条样式 运行效果: 进度条样式: <!--进度条样式--> <LinearGradientBrush x:Key="ProgressBar.Pr ...

  2. UINavigationBar统一修改导航条样式

    #pragma mark -- 统一导航条样式 //统一导航条样式 UIFont *font = [UIFont systemFontOfSize:19.f]; NSDictionary *textA ...

  3. 网站顶部显示预加载进度条preload.js

    网站加载的速度快的话,不会显示进度条加载时候的样式. 支持性主流浏览器都支持,ie浏览器需要9以上9也支持. 使用方法 <script src="http://code.jquery. ...

  4. 轻量级进度条 – Nprogress.js

    进度条库是前端中常见的库之一,bootstrap中提供了多种进度条样式.NProgress.js和nanobar.js是两款轻量级的进度条组件,使用简便. 官网: NProgress.js:http: ...

  5. 最简单的android自定义进度条样式

    一.自定义圆形进度条样式 1.在安卓项目drawable目录下新建一个xml文件如下:<?xml version="1.0" encoding="utf-8&quo ...

  6. Android多种样式的进度条

    原创 2016年04月26日 16:46:35 标签: android / clip / 进度条 / 8473 编辑 删除 ---- The mark of the immature man is t ...

  7. QT QProgressBar QProgressDialog 模态,位置设置,无边框,进度条样式

    一  关于模态设置 QProgressDialog可以设置模态(需要在new的时候传入parent),QProgressBar设置不好: 只有dialog可以设置模态,widget不能设置模态(QPr ...

  8. js进度条源码下载—js进度条代码

    现在很多网站会用到进入网站特效,到网页没有加载完成的时候,会有一个loding特效,加载完了之后才能看到页面,今天就带着做一个js进度条效果,今天要做的效果是纯js进度条加载,没有用到框架,方便大家进 ...

  9. 超赞的CSS3进度条 可以随进度显示不同颜色

    原文:超赞的CSS3进度条 可以随进度显示不同颜色 现在的WEB已经不是以前的WEB了,传输更大的数据量,有着更加复杂的计算,这就需要利用进度条来提高用户体验,必要时可以让用户耐心等待,不至于因操作卡 ...

随机推荐

  1. C# 在winform或者wpf中显示控制台窗口

    这儿需要使用两个系统函数: BOOL WINAPI FreeConsole(void); //// 关闭控制台窗口,参考:http://msdn.microsoft.com/en-us/library ...

  2. 修改win7电脑中所有文件的默认查看方式

    怎么修改win7电脑中所有文件的默认查看方式   如何设置才可以得到如下的效果:比如说打开一个盘符或者一个文件夹,进行设置之后,这个盘符里或者这个文件夹下的所有子文件夹.所有子文件夹里的所有文件都以“ ...

  3. jQuery .css color 重写 :hover样式没了

    $("#quickSqlDiv a").css({"color":"red"}); $("#course a").css ...

  4. <<UML大战需求分析>>阅读笔记(2)

    <<UML大战需求分析>>阅读笔记(2)> 此次读了uml大战需求分析的第三四章,我发现这本书讲的特别的好,由于这学期正在学习设计模式这本书,这本书就讲究对uml图的利用 ...

  5. C语言通过timeval结构设置周期

    在C语言中,我们经常需要设置一个时间周期.在这里,我们通过Timeval结构实现时间周期的设置.首先,我们介绍timeval,其定义如下(转载http://www.cnblogs.com/wainiw ...

  6. AVL-tree

    //avl.h#ifndef __AVL_H__#define __AVL_H__ typedef int KEY_TYPE; /* struct */typedef struct AVL{ KEY_ ...

  7. python中文编码

    前面章节中我们已经学会了如何用 Python 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会碰到中文编码问题 ...

  8. Framework manager编写SQL错误整理

    BMT-MD-0059 这个报错是由于导入了表全部的列,而之引用了部分列,所以未被引用的列将要被删除 XQE-PLN-0248 在模型中找不到“MONTHLY_FORECAST_FACT”的列“mon ...

  9. oracle exists

    公司项目中有用到exists,感觉挺有用的,拷贝一些感念的东西. “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T ...

  10. [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_ ...