leadstreet's technical blog

Add a progress bar on top of your blogpost or page to indicate the length of the page

Written by Johan Vantomme | 17 November 2018

Sometimes the scrollbar doesn't represent correctly the length of the post (specially if you have a long footer or any other block after your post, for example comments, or related post).

So in those cases the best way is add this new "scrollbar" that represent your position only for post height. So the visitor can see how much it left without loosing his scroll/read position.

How to install the custom module:

Step 0: (only if you don't have yet the module in your portal): Visit our marketplace, choose and buy the Progress bar CM.

Step 1: Add the module to your template

  1. Go to the Design Manager and open your template.
  2. Add the CM Progress bar module.
  3. Edit the CM default content with your prefered color and height for the bar.
  4. Save the template.
  5. Enjoy your new progress bar :)