scroll bar at the top which shows how much the content is scrolled.

Hi there,

There isn't an option built-in GP for this.

You will need to look for a plugin that offers this solution.

Hi thanks for helping me out.

Sorry for bugging you lately but its just about the time where I need to fix up a few things before I finally make up my mind to renew the theme for the next year...

SO can this be done without the plugin? (with css probably)

Hi there,

CSS won't be enough as you'll definitely need a script that calculates the position of the scroll on the viewport and reflect it on some sort of a progress bar.

The easy way is to find a plugin that does this for you.

Can you please recommend a nice plugin for that? That is good (with fewer vulnerabilities) and working with this theme?

Hi there,

try this:

1. Create a new Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Add this to the hook content:

<div class="progress-container">
    <div class="progress-bar" id="progressBar"></div>
</div>
<style>
   body {
      margin-top: 8px; /* match height of bar */
   }
</style>

Select the before_header hook
Set the Priority to 1
Set the Display Rules to where you want the bar to appear. eg. Posts > All Posts
Publish the Hook

2. Create a new hook.
Add this to your Hook content:

<script>
window.onscroll = function() {progressScrollBar()};

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

Select the wp_footer hook
Set the Display Rules to match the first hook.
Publish.

3. Add this CSS to your site:

.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* height of bar */
  background: #ccc; /* Background color */
  z-index: 10000; /* increase z-index to bring in front of slider */
}

.progress-bar {
  height: 8px;
  background: #4caf50; /* Progress bar color */
  width: 0%;
}

/* adjust position of progress when admin bar is present */
.admin-bar .progress-container {
  top: 33px;
}

Reference site for where the code comes from:
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp

Alright this is working fine. (added to one of the link shown below) But it has some issues:

1- Shows a white bar on all the other pages not being implemented on.
2- I am using sticky slider with css which blocks it (it runs behind the sticky slider)

I updated the 1. HTML and 3. CSS above to fix that.

Thanks. That fixed all.

Glad to hear that

I have a tip for when someone tries to use this code, but it doesn't work because another plugin uses window.onscroll. You can also use an event listener:

<script>

	window.addEventListener('scroll', () =>  progressScrollBar())

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

Thanks for sharing the solution! Much appreciated

Hi,

Sorry to hijack this post, but the question is 100% related to the method described here.

I have applied this solution successfully, although I would like to know if it is possible to introduce one modification.

I would like the progress bar to reflect the height of the post not the page. I mean that the progress bar shows 100% when it reaches the end of the post and not when it reaches the end of the footer. Is that possible?

Thank you in advance

Hi there,

to do that ( properly ) would require a plugin or custom development.
The most i can offer is the 'hackish' method i provided here:

https://generatepress.com/forums/topic/progress-bar-in-blog-posts/#post-2069098

Hi David,
I can live with the "hackish" method. I had to set the figure to a much higher number due to the design of the page, but it worked perfectly. Although the calculation may not be as exact as in some of the plugins I have tried, the truth is that this code is much lighter.
Many thanks.