Красивый индикатор прокрутки (Progress Bar)

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

Как можно сделать индикатор прокрутки (Progress Bar)?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

$(window).scroll (function () {
 var ratio = $(document).scrollTop () / (($(document).height () - $(window).height ()) / 100);
 $("#progress").width (ratio + "%");
});

<div id="cont">
 <div id="progress"></div>
</div>

* {
 margin: 0;
 padding: 0;
}

#cont {
 width: 100%;
 position: fixed;
 top: 0;
 bottom: 0;
 height: 2px;
 z-index: 9999;
}

#progress {
 background: #ED5E42;
 width: 0%;
 height: 2px;
}

Дополнительный стиль