ProdanSergey/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Pure JS Content progress bar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="container">
  	<nav class="nav"></nav>
  	<main class="content">
   		 	<span class="v-scroll"></span>
    		<div class="dummy"></div>
 		</main>
	</div>
  <script src="script.js"></script>
</body>
</html>

## script.js
var scrollLine = document.querySelector('.v-scroll');
var content = document.querySelector('.content');

var contentHeight = content.clientHeight - scrollLine.clientHeight;
var fixedHeight = contentHeight - window.innerHeight;

window.addEventListener('scroll', function(){
    var scrolled = (window.pageYOffset - (document.body.clientHeight - contentHeight));
    console.log(scrolled);
    var proportion = ((scrolled * 100) / fixedHeight);
    var width = proportion + '%';
    console.log(width);
    (proportion > 0) ? scrollLine.style.width = width : scrollLine.style.width = 0;
});

## style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  min-height: 100%;
  background-color: coral;
}
.container .nav {
  width: 100%;
  height: 100px;
  background-color: lightgray;
}
.container .content .dummy {
  width: 100%;
  height: 6000px;
}
.container .content .v-scroll {
  position: sticky;
  top: 0;
  display: block;
  width: 0;
  height: 5px;
  background-color: lightgreen;
  transition: width .1s linear;
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Pure JS Content progress bar</title>
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<div class="container">
	<nav class="nav"></nav>
	<main class="content">
	<span class="v-scroll"></span>
	<div class="dummy"></div>
	</main>
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	var scrollLine = document.querySelector('.v-scroll');
	var content = document.querySelector('.content');

	var contentHeight = content.clientHeight - scrollLine.clientHeight;
	var fixedHeight = contentHeight - window.innerHeight;

	window.addEventListener('scroll', function(){
	var scrolled = (window.pageYOffset - (document.body.clientHeight - contentHeight));
	console.log(scrolled);
	var proportion = ((scrolled * 100) / fixedHeight);
	var width = proportion + '%';
	console.log(width);
	(proportion > 0) ? scrollLine.style.width = width : scrollLine.style.width = 0;
	});
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	.container {
	width: 100%;
	min-height: 100%;
	background-color: coral;
	}
	.container .nav {
	width: 100%;
	height: 100px;
	background-color: lightgray;
	}
	.container .content .dummy {
	width: 100%;
	height: 6000px;
	}
	.container .content .v-scroll {
	position: sticky;
	top: 0;
	display: block;
	width: 0;
	height: 5px;
	background-color: lightgreen;
	transition: width .1s linear;
	}