How to Add a Progress Bar for Reading Pages in an in5 Document

Justin | HTML5,InDesign,Tutorials | Monday, June 26th, 2017

hero image for post on adding a progress bar to in5 output

A question came in on the in5 Answer Exchange about how to create a progress bar to indicate the reader’s position within the page count.

This technique is popular with online news magazines.

In the following article, I’m going to show you how to create such a progress bar by attaching a single file when exporting your HTML from InDesign.

Progress Bar Live Example

Here’s an example of what such a progress bar would look like.

This example was created entirely in InDesign (including the interactive buttons), exported with in5, and embedded into the post using the free in5 Embed WordPress plugin.

Infinite Flexibility

The HTML produced by in5 (as shown in the live example above) is very flexible and can be customized to your needs.

You can attach HTML, CSS, JavaScript, and other assets (like a folder of images or PDFs) to your in5 output, so that your assets appear in your final files each time you export.

This is done using the Resources section of the in5 dialog.

Resources section of in5 dialog with .js file attached

To build a progress bar showing the reader’s progress in the document, there are 3 technologies come into play.

  1. HTML – to include the element that houses the progress bar.
  2. CSS – to style the look of the progress bar.
  3. JavaScript – to update the appearance of the bar as the reader changes pages.

All 3 of these can be attached in the Resources section of the in5 dialog (see the image above).

However, I like make life easier for myself and others. 🙂

So I wrote everything into a single JavaScript file.

The Code Behind the Scenes

Here’s the code in its entirety.

var bar_color = '#ff9900';
var bar_height = 12;

$(function(){
  $progbar = $("<div id='reading_progress_bar'> </div>");
  $progbar.css({'width':0, 'height':bar_height,
    'position':'fixed', 'bottom':0, 'background':bar_color, 
    '-webkit-transition':'.5s width',
    'transition':'.5s width'});
  $('body').append($progbar);

  function updateReadingProgress(currentPage){
    var progress = currentPage/nav.numPages;
    $progbar.css('width',(progress*100)+'%');
  }

  updateReadingProgress(1);

  $(document).on('newPage', function(e, data) {
    if(multifile) updateReadingProgress(nav.current);
    else updateReadingProgress(data.index+1);
  }); 
});

A quick breakdown

There are 2 variables at the top, so you can easily configure the look of the progress bar.

var bar_color = '#ff9900';
var bar_height = 12;

Everything is wrapped in a special jQuery function to ensure that the rest of the page is ready before the progress bar is added.

The HTML for the progress bar is stored in a jQuery object. You can make it more complex if you like (e.g., wrap it in another element so that your progress bar has a background with a different color).

$progbar = $("<div id='reading_progress_bar'> </div>");

CSS is applied to set the look of the scroll bar, including a transition that causes the progress bar to animate when it changes width.

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

The HTML is then appended (added) to the body of the document.

An updateReadingProgress function to update the progress bar.

Lastly, a newPage event listener to update the progress bar when the page changes (this is an event created by the in5 output).

This code will work regardless of the total number of pages in your document.

Create Your Own Reading Progress Bar

You’re free to copy the code above and use it in your own projects.

Would you like to see all the source files?
Yes, send me the source files

Join the newsletter and get the source files

Icon_download

Sign up now and I'll send you the InDesign file, the JavaScript, and the HTML output.

Powered by ConvertKit

Related Articles

Leave a Reply

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