バーでダウンロード速度をどのようにシミュレートしますか？

Question

バーでダウンロード速度をシミュレートする方法はありますか？

例では、1Mバイト/秒の接続で5 MBをダウンロードするのにかかる時間を棒グラフで示しています。 http://jsfiddle.net/JxfAk/3/

私のjQuery：

$(document).ready(function() { 

var Download = 1048576 
var Data = 1048576 * 5 


}); 

HTML：

<div id="barboks"><div id="bar"></div></div> 

CSS：

#barboks {width:200px;height:40px;border:1px solid #CCCCCC;} 
#bar {width:50px;height:40px;background:blue;display:block;} 

は、私が40％をシミュレートするために、CSSとHTMLでバーをしました

私はちょうど私がデータのダウンロード速度としてバーの幅を非常に食べるべきか分かりません。

Answer 1

デモ：これは別のdiv内のdivを設定しますhttp://jsfiddle.net/Kt6Bc/2/

HTML--

<div id="container"> 
    <div id="bar"></div> 
</div> 

CSS--

#container { 
    position : relative; 
    width : 500px; 
    height : 25px; 
    border : 1px solid #000; 
    overflow : hidden; 
} 
#bar { 
    position : absolute; 
    top  : 0; 
    left  : 0; 
    width  : 0; 
    height  : 25px; 
    background : red; 
} 

JS--

var ani_running = false; 
$('#container').on('click', function() { 
    if (ani_running == false) { 
     ani_running = true; 
     $('#bar').animate({ width : '500px' }, 5000, function() { 
      $('#bar').animate({ width : '0px' }, 1000); 
      ani_running = false; 
     }); 
    } 
}); 

と私をアニメ化するnner divの幅はローディングバーのように見えます。親divの幅は500pxなので5secとすると1MB/sをシミュレートして内部divの幅をアニメーション化できます。