BlogsDope image BlogsDope

Scrolling Progress Indicator

May 13, 2019 CSS JAVASCRIPT 8489

Have you ever come across a scroll bar at the top of a webpage indicating your current scrolling position on the page? Surely you must have. A lot of websites use some indicator displaying the percentage of content you have scrolled so that you have an idea about how much more content to go before you finish reading.

These indicators are used on long webpages or articles. Here is the demo of the scroll position indicator which we will be creating in this post.

See the Pen Scrolling Progress Indicator by Aakhya Singh (@aakhya) on CodePen.

The Structure

Create a header region containing a heading h1 and a progress bar container with id scroll_container. This progress bar container contains a progress bar with id horizontal_scroll.

We will be fixing this entire header region on top using CSS.

HTML

<!-- header with progress bar container -->
<div id="heading">
  <h1>Progress Bar</h1>
  <div id="scroll_container">
    <div id="horizontal_scroll"></div>
  </div>
</div>

Create a div with id content inside which we will be writing the content.

HTML

<!-- content -->
<div id="content">
  <p>Lorem ipsum ... tellus.</p>
</div>

The Styling

Let's start with the header region.

Step 1

Make the header region fixed on top by giving it position: fixed and top: 0. Give it z-index: 1 so that it doesn't get hidden by scrolling content.

Set its width to 100% the width of its parent (screen) and center align its contents.

CSS

/* styling header which is fixed on top */
#heading {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
  background-color: #efefef;
  font-family: 'Open Sans', sans-serif;
}

Step 2

Give some background color to the container of progress bar so that it is visible when the progress bar does't fully cover the container width.

The thickness of the progress bar is set by giving it some height. Its initial width is set to 0%. Its width will be increased using JavaScript as and when we will be scrolling down the page. Set its background color to whichever color you want to represent your progress bar in.

CSS

/* styling container of progress bar */
#scroll_container {
  background-color: #ababab;
}

/* styling progress bar */
#horizontal_scroll {
  width: 0%;
  height: 7px;
  background-color: green;
}

Step 3

Style the content.

CSS

/* styling content */
#content {
  margin-top: 150px;
  font-family: 'Open Sans', sans-serif;
}

The Scrypting

On every scroll, a function is called that performs the following tasks.

1. Return the total height scrolled from the top of the webpage to the variable scrolled_top.

JS

/* height scrolled from top */
var scrolled_top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

2. Return the total scrollable height of the webpage to the variable scrolled_top.

The total scrollable height of a webpage is the difference of the height of the webpage and the viewable height (height which we can view at a time).

JS

/* total scrollable height */
var to_scroll = (document.documentElement.scrollHeight || document.body.scrollHeight) - (document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight)

3. Calculate the percentage of the webpage height scrolled.

% of height scrolled = (height scrolled from top / total scrollable height) * 100

JS

/* percentage of height scrolled */
var horizontal_width = (scrolled_top/to_scroll)*100;

4. Assign the percentage of height scrolled to the width of the progress bar.

So, whenever the user scrolls down the page, the scrollable height gets calculated and the width of the progress bar increases. Similarly, on scrolling the page up, the width of the progress bar decreases.

JS

/* assigning calculated width to progress bar */
document.getElementById('horizontal_scroll').style.width = horizontal_width + '%';

Summing Up

You can see the complete code below.

  • HTML
  • CSS
  • JS
<!-- header with progress bar container -->
<div id="heading">
  <h1>Progress Bar</h1>
  <div id="scroll_container">
    <div id="horizontal_scroll"></div>
  </div>
</div>

<!-- content -->
<div id="content">
  <p>Lorem ipsum ... tellus.</p>
</div>
						
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');

/* styling heading which is fixed on top */
#heading {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  text-align: center;
  background-color: #efefef;
  font-family: 'Open Sans', sans-serif;
}

/* styling container of progress bar */
#scroll_container {
  background-color: #ababab;
}

/* styling progress bar */
#horizontal_scroll {
  width: 0%;
  height: 7px;
  background-color: green;
}

/* styling content */
#content {
  margin-top: 150px;
  font-family: 'Open Sans', sans-serif;
}
						
/* call function on window scroll */
window.onscroll = function(){
  
  /* height scrolled from top */
  var scrolled_top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  
  /* total scrollable height */
  var to_scroll = (document.documentElement.scrollHeight || document.body.scrollHeight) - (document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight) 
  
  /* percentage of height scrolled */
  var horizontal_width = (scrolled_top/to_scroll)*100;
  
  /* assigning calculated width to progress bar */
  document.getElementById('horizontal_scroll').style.width = horizontal_width + '%';
}
						

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).