Бегущая полоса - индикатор загрузки страницы

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

#progress {position: fixed;
 z-index: 100;
 top: 0;
 left: -6px;
 width: 1%;
 height: 3px;
 background: rgb(198, 206, 22);
 border-radius: 1px; 
 transition: width 500ms ease-out,opacity 400ms linear;
}

И код скрипта, добавляющего контейнер div в верхнюю часть страницы (сразу после body)^

$(function() {
 $("body").append($("
").attr("id", "progress"));
 $("#progress").width((50 + Math.random() * 30) + "%");
});
$(window).load(function() {
 $("#progress").width("101%").delay(300).fadeOut(400);
});