Question

How is it possible to simulate a download speed with a bar?

Example show with a bar how long time it takes to download 5 MB with a 1 Mbyte/s connection.

I have made a bar with CSS and HTML to simulate 40%:
http://jsfiddle.net/JxfAk/3/

My 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;}

I just don’t know how I should very-ate the width of the bar as the download speed of the data.

Answer 1

Demo: 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;
        });
    }
});

This will set a div within another div and animate the inner div’s width to look like a loading bar. Since the width of the parent div is 500px we can simulate 1MB/s by taking 5sec to animate the width of the inner div.