Помогал сделать
Прогресс бар и не только, потом смотрю
Reading Position Indicator там тоже самое но подробно
получилось так ... код свой ... css из статьи
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height:1600px;
}
progress{
position:fixed;
left:0;
top:0;
width:100%;
height:5px;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
border:none;
background:transparent;
color:#F00;
}
progress::-webkit-progress-bar{
background:transparent;
border-radius:5px;
}
progress::-webkit-progress-value{
background:#F00;
border-radius:5px;
}
progress::-moz-progress-bar{
background:#F00;
border-radius:5px;
}
.progress-container{
width:100%;
background:transparent;
position:fixed;
top:0;
left:0;
height:5px;
display:block;
}
.progress-bar{
background:#F00;
width:0%;
display:block;
height:inherit;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(window).on("scroll resize", function() {
var o = $(window).scrollTop() / ($(document).height() - $(window).height());
$(".progress-bar").css({
"width": (100 * o | 0) + "%"
});
$('progress')[0].value = o;
})
});
</script>
</head>
<body>
<progress value="0">
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress>
</body>
</html>
кому интересно есть плагин для такой индикации (выбор внизу или вверху страницы, цвет)
https://github.com/jeremenichelli/scrollProgress