Scroll Progress Extension

The Scroll Progress extension displays a horizontal progress bar to indicate the distance scrolled on the pages in your Evolve course.

This article provides an overview of the Scroll Progress extension, extension setup and provides examples of Scroll Progress extension configurations.

Extension overview

The Scroll Progress extension displays a horizontal progress bar to indicate distance scrolled on the course pages. A variable can also be used to control the progress bar indicator.

You enable the Scroll Progress extension in the Extensions section in your Evolve course.

Extension set up

Follow these steps to enable the Scroll Progress extension in your Evolve course:

Click the Extensions tab in your course.

1. Scroll down to the Scroll Progress extension and toggle to enable the extension.
2. Click the Edit button and begin set up.

Behaviour section

In the Behaviour section:

1. Toggle to enable the setting Display on Menus. Enabling this will show scroll progress on menus.
2. Toggle to enable the setting Display on Extensions. Enabling this will show scroll progress on extensions with pages like the About extension and the Glossary extension.
3. Toggle to enable Set Scroll Progress Based on Variable.

With the setting Set Scroll Progress Based on Variable enabled, the progress bar will be controlled by the value of the selected variable.

1. Select Variable or Create Variable.
2. Enter Max Variable Value. By default, this is set to 0 (zero).

Appearance Section

In the Appearance section, you see that the appearance options for the Scroll Progress extension are available in the theme.

Extension Example

Below is an example that illustrates the Scroll Progress extension setup:

Example 1 – displays the Scroll Progress extension bars in an Evolve course. The Scroll Progress is shown in green for those pages that are scrolled partly or full.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.