[Sanu0074]

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

<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