Jquery animate() - полоса загрузки

Есть такой блок:

<div class="load-page"><div></div></div>

Он зафиксирован у верхнего меню страницы, стиль:

.load-page{

    display: none;

    width: 100%;

    height: 2px;

    background: #0C0C0C;

    position: fixed;

    z-index: 90000;

    top: 50px;

    & div{

        position: absolute;

        background: #00FCED;

        height: 2px;

        width: 0%;

    }

}

Сайт сёрфится с помощью history.js, при клике на ссылку посылается запрос и вызывается функция которая показывает эту полосу загрузки и плавно увеличивает размер внутреннего дива что в свою очередь эмитирует прогресс бар:

startLp: function(){

            $('.load-page').show();

            var l = $('.load-page div');

            l.stop().animate({'width':'95%'},2000,function(){

                $(this).stop().animate({'width':'98%'},15000);

            });

        }

В запросе callback рубит эту анимацию таким образом:

        stopLp: function(){

            var l = $('.load-page div');

            l.stop().animate({'width':'100%'},500,function(){

                $('.load-page').hide();

                $(window).scrollTop(0);

            });

        }

Но проблема в том что анимация работает довольно криво, во-первых она срабатывает неравномерно, во вторых эта кривая анимация отображается только при загрузке первой страницы, а при остальных она появляется и тут же быстренько исчезает, а самой анимации почему-то не происходит. Почему такой косяк? Как сделать правильно?

p.s. пытался добиться что-то наподобие как на youtube.com