<!DOCTYPE html>
<html>
<head>
<style>
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #ddd;
}
#progress-bar-fill {
height: 100%;
background-color: blue;
width: 0%;
}
</style>
</head>
<body>
<div id="progress-bar">
<div id="progress-bar-fill"></div>
</div>
<h1>Scrollable Content</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor quam non felis interdum pellentesque. Suspendisse potenti. Nullam molestie neque in justo consectetur, sit amet varius arcu malesuada. Fusce sed laoreet ipsum. Nulla
facilisi. Donec eleifend auctor purus, eu bibendum risus facilisis sit amet.
</p>
<script>
window.addEventListener("scroll", function () {
var progressBarFill = document.getElementById("progress-bar-fill");
var scrollPosition = window.scrollY;
var totalHeight = document.body.scrollHeight - window.innerHeight;
var percentage = (scrollPosition / totalHeight) * 100;
progressBarFill.style.width = percentage + "%";
});
</script>
</body>
</html>