Scroll Progress Extension

This extension is NOT recommended for use when creating accessible courses.

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

To enable the Scroll Progress extension in your Evolve course, press the Extensions button in the top left and select Scroll Progress.

Behavior section

In the Behavior 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.