Scroller is a customisable progress bar that increases in length across the top (or bottom) of a page as the user scrolls down the content

Shaking the Habitual
1 reviews



Scroller allows you to add a fully customisable visual progress bar to the top (or bottom) of any web page. The scroller bar increases in width from 0%, when the user is at the very top of the page, to 100% when the bottom of the page has been reached.

Scroller is great for web page articles / story pieces as it helps to illustrate progress / read time. It works really well for any web page though that has a lot of content (and therefore needs the user to scroll through it).


  • The scroller bar can be pinned to the top or the bottom of any page
  • The height of the bar can be adjusted
  • The colours of the bar (viewed and unviewed portions) are fully configurable
  • You can adjust the z-index of the bar to make sure it sits above any other content
  • You can (optionally) add content above the bar (see example use below)

Example uses

The example on the Scroller web page contains a navigation bar within the scroller stack. The scroller bar appears under the navigation bar providing a great effect. Any content could be added however (a logo or text for example).

Read more

Scroller Info

Scroller Reviews

Very useful stack

inStacks Software

3 years ago

Perfect little stack for displaying a horizontal scroll bar.

Read more

RapidWeaver newsletter

The latest news, articles, and resources, sent to your inbox weekly.

© 2021 Realmac Software Limited. All rights reserved.