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

[Mouse]

Hi there, I need a bar that moves as we scroll up and down showing the progress of the article. Besides that, is there a way if i can add how much time would it take on average to read teh blog post

[Leo]

Hi there,

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

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

[Mouse]

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)

[Elvin]

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.

[Mouse]

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

[David]

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

[Mouse]

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)

[David]

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

[Mouse]

Thanks. That fixed all.

[David]

Glad to hear that

[Ramon]

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>

[David]

Thanks for sharing the solution! Much appreciated

[Adrian]

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

[David]

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

[Adrian]

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.

[Author]

Posts