Reading Progress Bar for Gridbox Sites

01 September 2021

Meet the new tip & trick for website builder Gridbox. Most recently, you asked us how to create a reading progress bar. So, today we're going to show you how to add a simple reading progress bar to your Gridbox pages in just a few easy steps.

But first, let's find out what is a reading progress bar and why do you need to use it on your site? The reading progress bar is a modern trend that you can see on many websites. This dynamic element acts as an indicator that informs the user how far he scrolled the web page. Usually, this element is added to pages for better usability. The screenshot below is an example of a reading progress bar that you will create by following this step-by-step tutorial.

View Demo

Adding Reading Progress Bar

First, decide where you want to display the reading progress bar on your site. If you want the reading progress bar to work on all pages of the site, you need to add the code to the plugin Custom HTML and place it in the header. Or do you want to show the progress bar only on blog posts? Add the Custom HTML plugin to the Single Post Layout at the end of all content above the footer. So, have you decided? Then, here we go!

Step 1: Copy HTML Code

Copy HTML code and paste to the Gridbox plugin Custom HTML.

<div id="scroll-bar"></div>

Step 2: Copy CSS Code

Copy CSS code and paste to the Gridbox Code Editor.

#scroll-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 6px;
  background-color: #ed4f1d;
}

You can change the color of the reading progress bar to any other color in CSS code.

• background-color: #ed4f1d;

Step 3: Copy JavaScript Code

Copy JavaScript code and paste to the Gridbox Code Editor.

function setScrollBar()
{
    let header = document.querySelector('header.header'),
        style = header ? getComputedStyle(header) : {},
        hHeight = style.position == 'relative' ? header.offsetHeight : 0,
        dHeight = document.documentElement.offsetHeight,
        footer = document.querySelector('footer.footer'),
        fHeight = footer ? footer.offsetHeight : 0,
        width = ((pageYOffset - hHeight) / (dHeight - hHeight - fHeight - innerHeight)) * 100;
    window.scrollBar = window.scrollBar || document.querySelector('#scroll-bar');
    window.scrollBar.style.width = (width < 0 ? 0 : width)+'%';
}
document.addEventListener('scroll', setScrollBar);
window.addEventListener('resize', setScrollBar);

It's that easy, just a few simple steps and your site has a progress bar.

---