In this tutorial, you will learn how to add a simple progress bar on page scroll using CSS and JavaScript. Watch the video below for a detailed tutorial.
<body>
<div class="progress-bar"></div>
<div class="container">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. A, debitis quisquam. Inventore quod quos asperiores eaque optio facere eius vero sit cupiditate? Nesciunt minima numquam, ab est in laudantium eos!</p>
</div>
<script>
function extendBar() {
const percentage = (window.scrollY / (document.body.clientHeight - window.innerHeight)) * 100;
document.querySelector('.progress-bar').style.width = percentage + '%';
}
window.addEventListener('scroll', extendBar);
</script>
</body>body {
background-color: #2E3537;
padding: 50px;
font-family: 'Arial', sans-serif;
}
.container {
background-color: white;
padding: 50px;
}
.progress-bar {
position: fixed;
top: 0;
left: 0;
background-color: #19CBFC;
height: 10px;
transition: width 0.5s;
}