jQuery page loading bar

playing around with jQuery animate for a simulated page loading bar

HTML

<div id="content">
    <div id="bar"></div>
    <div id="complete"></div>
</div>

CSS

body {
    background:#111;
    margin:0 0 0 0;
}
#content {
    width: 100%;
    height: 15px;
    margin: 0 auto;
    overflow:none;
    position:absolute;
}
#bar {
    height: 1px;
    margin: 2px 0;
    background: #F7EF7C;
    box-shadow: 0px 0px 10px 1px #F7EF7C;
    overflow:hidden;
    position:absolute;
}
#complete {
    color:#444;
    font-family:helvetica;
    font-size:30px;
    text-align:center;
    width:100%;
    margin:3px 0 0 0;
}

JavaScript

function animateLoad(animationLength) {

    $('#bar').css('width', '-100%');
    $('#bar').html('');
    $('#bar').stop().animate({
        width: '+=100%',
    }, animationLength,

    function () {
        //$('#complete').html();
        //animateLoad(1500);
        $("#bar").fadeOut(2000),
            $("#complete").fadeOut(1500);
    });
}

$('document').ready(function () {
    var animationLength = 3000;

    setInterval(function () {
        var width = $('#bar').width();
        var parentWidth = $('#content').offsetParent().width();
        var percent = 100 * width / parentWidth;
        console.log(percent);
        $('#complete').html(Math.round(percent) + "%");
    }, 100);

    $('#content').change(function () {
        animationLength = $(this).val() * 1000;
        animateLoad(animationLength);
    });

    animateLoad(animationLength);
});