Simple and lightweight scroll progress bar

progress-bar.html

<div class="scroll-progress">
	<span class="scroll-progress--scrolled"></span>
</div>

scroll-progress.js

const scrollProgress = () => {
	const $bar = document.querySelector('.scroll-progress--scrolled');
	const max = document.body.scrollHeight - innerHeight;
	const percent = (pageYOffset / max) * 100;
	$bar.style.width = percent + '%';
};

addEventListener('scroll', scrollProgress);

styles.scss

.scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 5px;
	background: lightgrey;
	
	&--scrolled {
		position: absolute;
		width: 0%;
		height: 5px;
		background: green;
		transition: .25s ease-in-out;
	}
}