5/5

How To Add A Reading Progression Bar To Your Elementor Site

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.

😀

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Related Articles

How to Make Attention Grabbing Buttons

Often times a button with just an hover effect isn’t enough to grab your visitors attention. So in this brief article I am going to show you how easy it is to make attention grabbing buttons to help with conversions…

How to Outline Text in Elementor

Outline text with a stroke often times gives your designs a really cool effect to make your designs come alive. So we are going to go over just how easy it is to implement outline text in Elementor. Let’s Begin…

How To Trigger A Popup With a Menu Item

For this tutorial I will show you how to trigger a popup via a custom menu item. The process is pretty simple and won’t require to much of your time.…

Leave a Reply

Your email address will not be published. Required fields are marked *

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
Pages
Important
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.