Designing a Custom Progress Bar in Articulate Storyline
This is a quick step-by-step guide to create a custom progress bar and easily add it to an elearning module in Articulate Storyline. In this example, we will be using a Progress Bar Widget that's easy and free to use with any elearning project.
Here are some examples of what you can do with the Progress Bar Widget:
- Place the progress bar anywhere on the slide
- Customize the look of the progress bar beyond just an accent color
- Make the progress bar any height and width
- Style it to match your project’s visual theme
- Hide and show the bar using the actions and triggers in the learning module
- Adjust the progress display by using variables
- Display course progress instead of slide progress
Steps to Create a New Progress Bar
Select “Progress Bar” from the list of widgets in the Stencil editor on Cluelabs.com.
Select “+ New Widget” to create a new widget for your elearning course.
Enter widget details and select the type of the progress bar you will use.
Style your widget by selecting the colors, dimensions, position, etc.
Enter the name of the variable that will control the progress bar in Storyline and click “Save.”
In Storyline, go to the Master Slide and create a new trigger.
Paste the trigger code you were provided when you saved the widget in Stencil editor.
Changing the Progress Bar Value
Hiding the Progress Bar
Showing the Progress Bar