Progress Bar for page count?

Question

Is there a way to show a progress bar like an e-reader would? Looking to show how far a user has gone in a book we are exporting using multi-page export. Perhaps you have seen a plugin that works with in5 to accomplish this?

Comments

Created a full tutorial (link in the answer below).

Answer 1

Update: Yes, added in version 3.1, it can be found in the Viewer Display section if you have a Pro plan (or higher).

---

Manual approach for older versions detailed in the following blog post:
https://ajarproductions.com/blog/2017/06/26/how-to-add-a-progress-bar-for-reading-pages-in-an-in5-document/

Comments

Thank you so much for the support. I knew there had to be a way!

---

Happy to help. :-)

---

When we are using the multi-page export, the progress bar is flashing on the next page load. It seems to start back at zero each time. Is there a way to make it smoother and advance from the previous pages progress? We attempted to use a local storage solution but we are not having luck.

---

Remove the CSS animation from the extra code.

From this:
$progbar.css({'width':0, 'height':bar_height,
    'position':'fixed', 'bottom':0, 'background':bar_color,
    '-webkit-transition':'.5s width',
    'transition':'.5s width'});

To this:
$progbar.css({'width':0, 'height':bar_height,
    'position':'fixed', 'bottom':0, 'background':bar_color, });

You could also use local storage to set the start width (instead of 0, and leave the animation in).