Created by Smart Sparrow

Progress Bar

The Progress Bar widget shows learners how far along they are in a lesson. It can display progress within a specific section as well as the entire lesson as whole. It encourages a sense of accomplishment as work gets done, fueling learners to get through to the end of their lesson.


Unique ways to use this widget

The labelled progress bar can be used to display a lesson with unequal sections. For example the first section might occupy the first half of a lesson whilst sections 2 and 3 each occupy one quarter of the lesson each.


Have a play


Basic setup instructions

  1. This component can be found in the Author. Insert the widget from the Components tab and resize it to your liking.
  2. With the component selected, Click on Configure and select Options to set it up.
  3. You must change the Mode to Config mode to set up the widget.
  4. Create a Layer and place all the screens in your lesson underneath this Layer to add the component to every screen. Now you won’t have to copy and paste the same component over and over again.
  5. First set the total number of screens in the lesson by typing it in the grey box to the right.
  6. Add additional sections by clicking on the blue button on the left. As new sections are added the total number of screens will be allocated across the sections. You can adjust the number of screens in each section by clicking and dragging the divider between two sections.
  7. Next use the Initial State condition for the screen and set the Current Screen. E.g. if there are 10 total screens in your lesson and you are on the third screen: the total screens should be set to 10 inside the widget and Current Screen should be set to 3. This will mean the progress bar will show 30% complete.
  8. Make sure to change the mode to Student when done.



  • Q: When I change the percentages it affects every screen. Why? This might be because you have the component on a Layer and then you’re configuring the percentages of the component on the layer which affects all screens instead of the Initial State condition for each screen.


Other Options

  • You can customise the way it looks using css.
  • Customise the colors of the Section text labels (Section Text Color), the background color of the progress bar (Section Background Color) and the foreground color (Section Background Color). Pick the color by writing a rgb value, hex code or even a common name of a color e.g. purple.
  • You can also determine the width (in pixels) and color of the separators between each section using Gap Width and Gap Color respectively.


Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Widget run mode
Config JSON
Strigified JSON object that contains the section structure
Section Text Color
Valid CSS color code for section text
Section Foreground Color
Valid CSS color code for section progress (foreground)
Section Background Color
Valid CSS color for section segment (background)
Gap Width
Spacing between segments. Should be a number between 1 and 20
Gap Color
Valid CSS color for the color of the gap
CSS Source
Css or the url of the CSS file to style the button
Current Screen
The current screen number (progress)


Advanced widget setup

Contact our team for help setting up the widget and trap states in your lessons.

Want to work with us to create your own component?
Request services