Created by Smart Sparrow

Progress Bar

The Progress Bar widget shows learners how far along they are in a lesson. 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 progress bar can also be used to display the student’s score by feeding it values from the lesson. This creates what the instructor has called a “Well-being Meter” to give the students a visual indication of how they’re doing.

See how the “Well-being Meter” works here:


Have a play


Basic setup instructions

  1. First, create a Layer and place all the screens in your lesson underneath this Layer.
  2. On the layer, insert the Progress Bar widget from the Components tab and resize it to your liking. By adding the widget to the layer, you won’t have to copy and paste the same component over and over again.
  3. Once you have added the component to the layer, click on Configure and select Options to set it up.
  4. Start by setting the Total Question Numbers. This tells the widget how many screens there are in the lesson.
  5. Then, use the Initial State condition of each screens to set the Current Screen Number.

E.g. if there are 10 total screens in your lesson and you are on the third screen: the Total Question Numbers should be set to 10 and Current Question Number should be set to 3. This will mean the progress bar will show 30% complete.



  • 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.
  • You could also use “Question percentage” to set the percentage of where individual screens are fitting in the overall lesson.


Component Properties

Properties available for creating trap states or configuring your questions.

Property Purpose Type
Question Percentage
Percentage of question related to full bar
Total Question Numbers
Total number of questions
Current Question Number
Current Question Number
Custom css definitions


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