jQuery на scroll к элементу

В общем у меня есть обычный bootstrap progress bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>  
</div>

Также у меня есть jQuery скрипт, который увеличивает ширину прогресс бара

$(".progress-bar").each(function () {
  $(this).animate( {width: $(this).attr('aria-valuenow') + '%' }, 2000 );
});

Мне нужно чтобы этот скрипт выполнялся только тогда, когда сам .progress находится в зоне видимости экрана.
Я пытался запускать вот этот скрипт:

$(window).scroll( function(){
  $(".progress-bar").each(function () {
    var bottom_of_object = $(this).position().top + $(this).outerHeight();
    var bottom_of_window = $(window).scrollTop() + $(window).height();
        if( bottom_of_window > bottom_of_object ){
            $(this).animate( {width: $(this).attr('aria-valuenow') + '%' }, 2000 );
        }
    });
});

Но почему то мой прогресс бар начинает дергаться и очень медленно грузится.
Как сделать чтобы мой скрипт начал работать только тогда, когда я пролистываю страницу до элемента .progress или элемент находится в зоне видимости экрана при загрузке страницы.
Буду благодарен за любую помощь.