Scroller Stack

For those that like seeing progress

Scroller Stack

Scroller is a simple Rapidweaver stack that acts as an indicator for progress down the web page. As the user scrolls down, scroller bar scrolls from left to right until the bottom of the page is reached.

Scroller Features

On long web pages having a visual indicator of your progress down the page can be a desirable feature. It lets the user easily determine how much of the article they have read / have still to read.

Style it

Choose the base colour and the scroller colour. You can also set what height you want the scroller bar to be.

Pin it

Have the scroller bar either at the top or the bottom of your page.

Use it

You can just use the scroller or you can opt to add content above it.

Tune it

Adjust the z-index if required to move the stack above any nav bar you use

Scroller Examples


You'll see the scroller bar in action at the top of this page (scroll to see it move!). On this page a navigation stack has also been added to the scroller stack as this gives a really nice effect. You could though simply add some text or a logo etc. It shouldn't take up too much space as this will be fixed to the top of the screen.

You can obviously however use the scroll line just on its own. You can see an example of that over on the Quizzer stack page. The bar there is also a bit more subtle too (i.e. not so tall or garishly coloured!). It also has a fully transparent colour set for the 'unviewed' part of the bar. This means that all you see is the progress part.

This is a free stack

Scroller Stack Settings

Place at top

If you want the bar to be placed at the top of the page then leave the box ticked. This is the default behaviour. If you'd rather have it at the bottom of the page then deselect this box.


Select the colours that you want to use for viewed and unviewed. The bar will start at 100% of the unviewed colour and the viewed colour will gradually expand across the page until the bottom of the web page is reached.

Note: You can make the unviewed colour transparent to just show a single scrolling bar.


Set the height that you want the bar to be.

Note: If you are using a sticky or fixed navigation bar then you might want to add some margin to the top of that to allow for the height of the scroller bar.


If you need to bring the scroller bar above other elements on the page (i.e. navigation bars) then you can adjust this value accordingly.

Add content

If selected, this option allows you to add any other stacks to it. These would appear above the fixed scroll line. You could add a logo or a title.

Note: This can work especially well for navigation bars though it is important that the nav bar is set to 'static' as the scroller stack will fix it to the top.

If you appreciate this free stack then please leave a rating and/or review on the RapidWeaver Community site

© Shaking the Habitual Contact Us