JS非常好的一个进度提示

今天想实现一个登录后进度条的功能。但是，对于登录后，怎么真实对加载的文件进行评测遇到了很大的问题。

我们平时使用的登录后进度条极少数是像gmail那样真实的采集网络环境。

一般，像我使用的金山快盘上传，163等进度条是从0直接跳到99%，然后用户就等着拿最后的1%加载成功，这百分之一的加载用了整个加载过程99%的时间！

Gmail的情况是完全是JS做数据采集，需要server完成实时的push功能。

网络上有一些分析，但是，不够精细。

在调查了一些框架之后，我觉得 cvi_busy_lib.js  做的很不错。

Setting Up

Download "buzy.zip" and include it into your webpage.

<script type="text/javascript" src="cvi_busy_lib.js"></script>

Using It

Add overlay to element

ctrl = getBusyOverlay(parent[, overlay[, busy]]);

parent  == element to add the overlay to or "viewport"

overlay      e.g. {color: 'black', opacity: 0.5, ...}

color   == STRING 'black' or '#000000' or 'rgb(0,0,0)' Default: 'white'
opacity == FLOAT 0.0 - 1.0 Default: 0
text    == STRING e.g. 'loading' Default: ''
style   == STRING e.g. 'color: black;' or 'my_text_class' Default: ''

busy         e.g. {color: '#000', size: 32, ...}

color   == STRING '#000000' or '#000' Default: '#000'
size    == INT 16 - 512 Default: 32
type    == STRING 'circle|oval|polygon|rectangle|tube' or 'c|o|p|r|t' Default: 'tube'
iradius == INT 6 - 254 Default: 8
weight  == INT 1 - 254 Default: 3
count   == INT 5 - 36 Default: 12
speed   == INT 30 - 1000 Default: 96
minopac == FLOAT 0.0 - 0.5 Default: 0.25

Edit overlay text

ctrl.settext(STRING);

Remove overlay from element

ctrl.remove();

Examples

if(typeof $=='undefined') {function $(v) {return(document.getElementById(v));}}ctrl = getBusyOverlay("viewport");ctrl = getBusyOverlay($('box'));ctrl = getBusyOverlay($('box'), {opacity:0.5});ctrl = getBusyOverlay($('box'), {}, {size:16});ctrl = getBusyOverlay($('box'), {color:'blue', opacity:0.25}, {type:'oval'});ctrl.settext('Ready...!');ctrl.remove();try {ctrl.remove(); delete ctrl;} catch(e) {}if(typeof(ctrl)=='object') {ctrl.remove(); ctrl="";}

Why use Javascript cvi_busy_lib?

• Fast and easy to implement (perfect for ajax applications).
• Don't need to spend time in an image editor creating gif animations.
• Very flexible by multiple (optional) parameters for individual styles.
• Get always a proper loading indicator independently of parent elements style.
• Moves the DOM tree up to find the next parent block-level element.
• Freezes the parent element visual (overlay) and technical (mouse events).
• Works with html elements even if (moz/webkit)-border-radius is activated.
• It's dead easy to add or remove the loading indicator to/from an html element.
• Free of charge use on non-commercial and private web sites.

In older browsers, the script degrades to simple quadratic shapes.