A nice and easy one today to show you how to add a scrolling progress bar to your website – or article, that visualises how much of an article has been read (or how much a user has scrolled down the page).
We’ll use three files for this:
- index.html
- style.css
- main.js
A demo of this tutorial can be found here.
1. Laying The Foundation For Our Scrolling Progress Bar
Let’s first start with the HTML page that will act as our ‘article’ page, and our stylesheet.
- index.html
- style.css
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Create a Scrolling Progress Bar With JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style rel="stylesheet" href="style.css">
</head>
<body>
<div id="progress-bar-wrapper">
<div id="progress-bar"></div>
</div>
<div id="content-area">
<h1>They See Me Scrolling, They Hating...</h1>
<p>In auctor, libero non luctus accumsan, ligula felis imperdiet tortor, id sollicitudin mi diam eget nibh. Duis enim libero,
commodo eget massa eu, mattis vestibulum lorem. Praesent eget luctus urna. Nunc ornare et mauris non sodales. Quisque eget
quam ac nulla gravida luctus. Nam convallis, odio nec fringilla viverra, lorem elit porttitor erat, eu feugiat lorem ligula
eget ligula. Nunc porta ac lacus non tristique. Aenean vehicula imperdiet enim, convallis tristique quam laoreet at. Nunc
scelerisque dui nunc, id ultrices tellus fringilla at. Proin ex risus, lacinia tincidunt sem vel, auctor tristique nunc.
Aliquam diam risus, fermentum ac ante non, convallis porttitor mi. Etiam quis condimentum ipsum, id viverra libero.</p>
<p>Nulla facilisi. Maecenas et dictum leo. Sed pellentesque tempus arcu tristique rutrum. Etiam ligula lorem, aliquam vel elit porttitor,
maximus malesuada ante. Nam ac tellus ut leo sollicitudin pulvinar. Integer ac placerat dui. Nam consequat lectus tortor, in faucibus
magna accumsan quis. Maecenas ut ante purus. Suspendisse eu arcu enim. Cras vestibulum justo elit, vitae rhoncus metus auctor at.
Vivamus condimentum neque pretium erat ultricies, euismod pulvinar quam finibus. Curabitur ut nibh suscipit, scelerisque nunc
congue, egestas tellus. Aenean at tortor id orci ullamcorper semper et nec lacus. Aliquam erat volutpat. Nunc mollis est ac urna
ultricies commodo. Nam rutrum felis in pharetra dictum.</p>
<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna.
Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo
et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer
viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus
vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p>
<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in
elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a
eros aliquet sodales. Suspendisse potenti.</p>
<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis.
Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor
dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed
rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin.
Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
<p>Vestibulum faucibus ultricies erat eu aliquet. Pellentesque luctus eros et blandit pulvinar. Etiam lectus odio, dapibus a convallis eget, pulvinar ut
augue. Aliquam eleifend id metus ut consectetur. Donec tempus ultrices tempus. Phasellus ac sollicitudin orci. Nulla auctor, orci ac sodales
commodo, leo turpis euismod dolor, sit amet egestas mi libero ac nibh. Donec sollicitudin ante ac massa condimentum tempor. Donec nec nibh cursus,
semper ligula eget, finibus felis. Fusce laoreet nulla velit. Aliquam a nulla ultrices, venenatis purus nec, dictum odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed finibus rutrum neque et efficitur. Phasellus vulputate nec erat mattis aliquet. Proin at neque ullamcorper,
sodales sem quis, malesuada odio. Donec id dignissim metus, et tempor mi.</p>
<p>In tincidunt dui mi, a dignissim metus commodo et. Quisque bibendum libero in ligula luctus laoreet. Nullam facilisis ut sapien vitae convallis.
Donec varius, metus vel ultricies pulvinar, metus leo maximus dui, nec convallis justo lorem id mauris. Nam sit amet convallis odio, ac molestie turpis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tincidunt justo eu tempus scelerisque. Morbi eget velit id augue tempor sagittis.
Mauris sollicitudin magna a elit fermentum, non porttitor ligula ultricies. Sed et enim libero.</p>
<p>Quisque urna erat, bibendum sed turpis eget, posuere posuere metus. Curabitur ac sodales justo. Pellentesque sodales arcu et elit tincidunt, nec placerat
diam consectetur. Nunc sit amet velit nec enim gravida aliquam. Vestibulum viverra, tortor molestie tristique auctor, lectus purus aliquam enim, eget
viverra quam libero eget neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum consectetur
dignissim posuere. Mauris ultrices, diam eget maximus porttitor, magna diam porta erat, non fringilla lectus lectus placerat magna. Vivamus vel lorem
sit amet massa congue rutrum eu quis diam. Nunc enim lectus, varius quis arcu id, malesuada hendrerit purus. Etiam molestie viverra metus sed malesuada.
Cras et massa dapibus, vehicula magna et, dictum odio. Proin sem magna, accumsan et lobortis eu, sagittis at ex. Phasellus pharetra pharetra mauris, eu
lacinia urna. Aliquam ex risus, volutpat sit amet eleifend ut, fermentum ac sem.</p>
<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna.
Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo
et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer
viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus
vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p>
<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in
elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a
eros aliquet sodales. Suspendisse potenti.</p>
<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis.
Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor
dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed
rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin.
Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
<p>Nullam pulvinar vitae nisl consectetur suscipit. Nulla facilisi. Ut et ante id leo condimentum varius viverra at magna.
Proin eget quam ante. Mauris faucibus sapien risus, quis hendrerit tortor hendrerit eget. Cras sem turpis, auctor et leo
et, feugiat porttitor odio. Donec sed sem lectus. Nulla in tincidunt augue. Vivamus vel semper neque, quis mattis augue. Integer
viverra lorem eget mauris vulputate aliquet vel sed massa. Duis facilisis diam nec dapibus pretium. Fusce tempor lacinia lacus
vulputate porttitor. Vivamus vel tincidunt turpis, at egestas ante.</p>
<p>Vivamus eu ligula sed ex tincidunt pellentesque at a neque. Donec non viverra augue, nec sollicitudin nisl. Maecenas in gravida nulla, in
elementum arcu. Phasellus ullamcorper lectus vel turpis suscipit aliquet. In rutrum lorem ac tincidunt tincidunt. Vestibulum et justo a
eros aliquet sodales. Suspendisse potenti.</p>
<p>Curabitur vestibulum lacus sed ipsum elementum blandit. Aliquam erat volutpat. Nullam tempor sem varius elit euismod, quis mollis libero sagittis.
Nullam quis consectetur lectus. Phasellus laoreet odio at ante finibus, nec sodales odio lobortis. Ut scelerisque leo mattis erat porttitor
dignissim. Mauris interdum libero in est rutrum, at rhoncus nunc gravida. In ac molestie enim. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia curae; Pellentesque non placerat diam. Vivamus at velit placerat, efficitur leo non, varius nisl. Sed
rutrum ex ut neque auctor imperdiet. Morbi hendrerit ut quam lobortis sollicitudin. Quisque sit amet velit in tortor suscipit sollicitudin.
Nulla blandit ligula blandit, scelerisque massa sed, lacinia risus.</p>
<p>Vestibulum faucibus ultricies erat eu aliquet. Pellentesque luctus eros et blandit pulvinar. Etiam lectus odio, dapibus a convallis eget, pulvinar ut
augue. Aliquam eleifend id metus ut consectetur. Donec tempus ultrices tempus. Phasellus ac sollicitudin orci. Nulla auctor, orci ac sodales
commodo, leo turpis euismod dolor, sit amet egestas mi libero ac nibh. Donec sollicitudin ante ac massa condimentum tempor. Donec nec nibh cursus,
semper ligula eget, finibus felis. Fusce laoreet nulla velit. Aliquam a nulla ultrices, venenatis purus nec, dictum odio. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Sed finibus rutrum neque et efficitur. Phasellus vulputate nec erat mattis aliquet. Proin at neque ullamcorper,
sodales sem quis, malesuada odio. Donec id dignissim metus, et tempor mi.</p>
</div>
<script src="main.js"></script>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
p {
margin-bottom: 15px;
line-height: 24px;
}The main parts of this mark-up page, and stylesheet are:
- We’ve included our
style.cssfile. - Add a
#progress-bar-wrapperdiv that will house our#progress bar. - And we have our
#content-areathat will act as our article. - In our CSS, we have reset the page’s paddings, margins, and added our preferred box-sizing value.
And what we’re left with so far is this:
2. Styling up Our HTML Page
There’s not too much explanation needed here for the CSS, other than we have created a #progress-bar-wrapper that will be fixed to the top of the web page, and inside of this is the #progress-bar that will display the progress of how much of the article has been scrolled down.
- style.css
...
#progress-bar-wrapper {
width: 100%;
height: 50px;
background-color: #eee;
position: fixed;
top: 0;
z-index: 1;
}
#progress-bar {
height: 100%;
background-color: #de466c;
width: 0;
}
#content-area {
position: relative;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 30px 30px 0px 30px;
border: 1px solid #ccc;
margin-top: 100px;
margin-bottom: 50px
}And with the CSS added, we get the following…
3. Adding the Magic JavaScript
All that’s left to do is add the special sauce to tie the progress bar to scrolling height of our #content-area to make our scrolling progress bar come to life!
- main.js
const progressBar = document.getElementById("progress-bar");
const contentArea = document.getElementById("content-area");
function updateProgressBar() {
const contentAreaHeight = contentArea.offsetHeight - window.innerHeight + 100;
const scrolled = window.scrollY;
const scrollPercentage = (scrolled / contentAreaHeight) * 100;
progressBar.style.width = scrollPercentage + "%";
}
window.addEventListener("scroll", updateProgressBar);
window.addEventListener("resize", updateProgressBar);Notes:
Here’s a little run down on what’s going on in our JavaScript file:
First we declare two variables to target the #progress-bar div, and the #content-area div.
const progressBar = document.getElementById("progress-bar");
const contentArea = document.getElementById("content-area");Here we create a function called updateProgressBar that will perform all of the necessary progress bar / scrolling calculations.
function updateProgressBar() {
}Inside of our updateProgressBar function we declare three variables
const contentAreaHeight = contentArea.offsetHeight - window.innerHeight + 100;
const scrolled = window.scrollY;
const scrollPercentage = (scrolled / contentAreaHeight) * 100;Let’s go through these variables below:
contentAreaHeightcontentAreaHeightcalculates the height of the content that needs to be scrolled through. It subtracts the height of the visible portion of the window (window.innerHeight) from the total height of the content area (contentArea.offsetHeight). Also, I have added an additional 100px here, to accomodate for the top margin of the#content-area.scrolled
This variable gets the current vertical scroll position of the page from the window object and assigns it to the variable scrolled.scrollPercentagescrollPercentagecalculates the percentage of how far the user has scrolled down the content area. It divides the scrolled distance bycontentAreaHeightand then multiplies by 100 to get a percentage value.
Then we simply update our progress bar width with the percentage as the user scrolls down.
progressBar.style.width = scrollPercentage + "%";The last thing we just need to do is tie this function to two event listeners – one when the page is scrolled, and one when the page is resized.
window.addEventListener("scroll", updateProgressBar);
window.addEventListener("resize", updateProgressBar);Bish bash bosh, and we get the following:
You can grab the code from Github.
