Simple Progress Bar

Mar 29, 2013

Here's a simple progress bar I created for Storyline. I hope it's helpful.

If anyone has ideas how to improve this, I'd be interested to hear them.

28 Replies
Kane Banes

Hi David,

I had added a progress bar in the attached story file but didn't need variables (for the progress bar component) as users must complete every slide. Variables are used but thats to determine if a question has been answered and to display the NEXT button.

The progress bar is just a combination of images with different shades that have an animation effect to give it the progress bar appeal. After the last slide the user goes to a YES or NO type slide so they have the same progress effect as the user will only get one of the other.



steve hildreth

I made a few slight adjustments to the project.

1. The page counter increments and decrements dynamically. both by auto continue to selecting the PREV/NEXT buttons

2. I inserted the percentage complete within the Progression Bar

3. I reference the removed the "100" state and reference the "Normal" state at 100% complete

4. I removed the second scene from the original for my own simplicity purposes and set scenePages to 13

5. Added a X of Y pages count to the main content area

6. Switched from >= and

The modifications were mainly implemented to fit my need, but I wanted to share as well.  Props to David for doing all the hard work.

steve hildreth

I believe the attached does what you are asking.  I created a second scene, and copied the second slide from the original scene into this new second scene, then copied the slide a second time for testing purposes.  I then moved the final slide from the first scene to the final slide of the second scene.  I also modified the variable to take account of the additional slides.

I then modified the triggers on the (now) final slide in the first scene to take the user to the first slide of the second scene when the timeline end, the next button is clicked, etc.

I hope this makes sense.


Michael Long

Steve, great job on refining the progress bar! Is there a way to use your progress bar with the the built-in player menu and allow for free navigation. Right now, if I revisit an earlier slide, it seems to be decreasing the progress bar and by the end of the course it never reaches 100. I have also tested this jumping forward and I actually get more than 100% completion. Any assistance would be greatly appreciated :)

steve hildreth

The issue is the counter that is used as part of the calculation increments by 1 each time the "next" button is click or the moves to the next page when the timeline ends.  Similarly, the counter is decreased by 1 when the "prev" button is clicked.  Using the menu as a method for navigating the course results in the counter to be bypassed.  One approach to resolve the issue would be to hardcode he page number on each slide.

I will agree that this is not the most elegant way of doing things and if it is a large course, not a method I would choose.

This discussion is closed. You can start a new discussion or contact Articulate Support.