How to show progress bars from multiple pages on Home Page

Hi! 

I'm trying to add custom reading progress bars to 3 separate pages and I'd like them to also show on the Home page under the link to each of these pages. Is this at all possible? I have access to code injection if that makes a difference. (attached is a snippet of my wireframe for the Home page) 

Thank you!! 

They will be a fixed progress bar or dynamic bar? I mean the number in the bar will be fixed and you need to adjust it manually, or it will change dynamically based on some metric (for example changes based on the amount of donations that users have sent)

47 minutes ago, tuanphan said:

They will be a fixed progress bar or dynamic bar? I mean the number in the bar will be fixed and you need to adjust it manually, or it will change dynamically based on some metric (for example changes based on the amount of donations that users have sent)

It will be a dynamic bar based on their reading progress on each of these 3 pages (for example, if they scrolled down all the way to the bottom it'd be marked as 100% on the Home page ideally). 

If dynamic, I don't know how to do this

if you need to fixed, let me know, I can give some code

Even static would be useful especially for styling, thank you!

4 hours ago, vikavikavika said:

I'm trying to add custom reading progress bars to 3 separate pages and I'd like them to also show on the Home page under the link to each of these pages.

This will require some custom JavaScript to do something like this:

1. when a page loads, check if the page is one of the three pages to be tracked.
2. if a tracked page has loaded, the script will need to monitor the user's progress as they scroll down the page.
3. when the user stops scrolling, the user's progress (scroll position) can be saved to local storage so it can be recalled later.
4. when the homepage loads, the script should look for the module grid (shown in your screenshot) and add the progress bars to the page content in the appropriate positions. 
5. the scroll progress should then be loaded from local storage and the progress bars adjusted accordingly.

This is a very niche request so, whilst all the steps are straightforward for a developer, it's unlikely you'll find any similar posts with pre-written code that you could copy and paste. 

Did this help? Please give feedback by clicking an icon below  ⬇️