In todays article we will be going over 2 ways to add a reading progression bar to your Elementor Powered Site. The first requires a wordpress plugin with simple options for the average user and the second is going to required a more hands on approach with a little coding but not much, so if you are ready let’s get into it.

The Plugin Way

In my research I tried 3 different plugins two of the plugins seemed bugged and even though they were recommend my other WordPress bloggers they didn’t work well with Elementor. The one that worked best for me was Reading progressbar by Jb Audras worked great right out the box.

The plugin offers some basic options to help you style and configure the look and position of the reading bar. Nothing overly complicated you can choose the color and post-type you want the progress bar to be visible on. You can find the options under settings > reading progressbar .

Installing this plugin doesn’t required the need of Elementor Pro to work so just install, configure and you are done.

The Code Way

For this method we will be following the example provided by w3schools.com. Their approach is simple and doesn’t provide any over kill solving the problem. I will be making some small changes to the css and html but nothing too fancy.

Please note that this method does require that you have Elementor Pro in order to create a single post template.

Let’s Begin

Open up your single post template or create one if you have done so already.

At the top of your template create a one column section.

Drag an HTML widget into that section.

Select the column inside that section and set the padding to 0px. I also gave the section a z-index of 100 so that it sits on top of everything as you scroll down the page.

Below you can see how my setup is laid out.

Next we need to add the html.

Open the html widget and apply this markup.

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div> 

Save and view your page.

Now we need to add some css to our customizer so that it looks nice.

Click Customize at the top of the page and open the CSS tab.

Add this CSS and publish.

/* The progress container (grey background) */
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
	position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: #f1f1f1;
}

/* The progress bar (scroll indicator) */
.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

The Javascript

So in order for this to all work we need to add some javascript that will be used to measure how far the user has scrolled.

For this I will be using this plugin to house my Javascript but you are free to use what ever you like.

Go to Custom CSS & JS > Add Custom JS and apply this javascript.

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

Give it a name and select footer in the option menu to your right and save it.

View a posts page and give your self a pat on the back.

Hope you enjoyed this article.

😀