Custom Progress Bar

Dec 20, 2015

How do i create a custom progress bar in Storyline 2 ?

I have attached a screenshot of the progress bar.The bar will fill up automatically as the user progresses through the slide.The progress bar will fill up gradually with the timeline of the slide.

16 Replies
Daniel Sposato (Philly)

Hey Abhishek,

Attached is an example of how to add a progress bar to your project. The animation is on a slide layer in the main master slide. It is controlled by adding to a variable. The slide layer is set to pause at every second on the progress bars slide layer.

This examples progress bar is set to progress for 10 slides/interactions. To make it work for more or less you would need to:

1) Go into the main master slide and adjust the animation on the slide layer to the amount of times you want it to progress (in the timeline view).

2) Adjust it also for the length of time (in the animation view) for the animations number of seconds.


3) You will need to add triggers on the same slide layer to pause it at every second for the amount of times you want it to pause in the progress (you should already see 10 triggers there).


4) Lastly you now just have to add 1 to the variable "Total_Progress" every time you want the progress bar to grow a little.

May sound complicated but it's pretty simple. Let me know if this works for you!

Daniel Sposato (Philly)

The example I gave you will work for non-linear as well. Once it's setup you only need to add to the variable for it to show progress. And, what I love about it most, is that it's on a slide layer (as opposed to states) so you can add animations in between each progress with as much detail as you want once you fully understand the concept.

Abhishek Roy

thanks for your effort Daniel.I'll try to implement it.


will it work for my course ? it's non-linear with 53 slides in total.

i want to create a single progress bar in Slide Master and apply it to all of the slides.How can i do that ?

i followed the link below and noticed that i have to set each slide to Resume to Saved State to make the progress bar work.this one works with just 3 variables.

but i want to set my slides to Reset to Initial State because i have to implement a custom replay button for each slide.i have removed storyline's default player bar completely.

Is there any workaround so that i can make this progress bar work without having set each slide to Resume to Saved State ?

Daniel Sposato (Philly)

It should work fine for your course regardless of the slide count or order. The progress bar will only add some length to the progress bar when you tell it to, by adding to the variable "Total Progress".

In my example, I set the "Advance Progress" button to add to the variable "Total Progress". All you need to do is put that trigger at any point you wish on each slide to make the progress bar gain a little progress. First you would need to set up to bar in the way I described initially to accommodate your 53 slides (as you'll want it to progress 1/53rd each time a slide is completed.

If you only want the slide to report progress once the slide is completed (in case the user replays a completed slide) you could set an individual trigger with a new variable for each slide to be changed once the slide is completed. This variable (lets call it "Slide_Complete_1" for the first slide) would have a value change (from a trigger) indicating that it has been completed. Then the trigger that adds to progress would look to see if the slide variable is equal to a completed value. If it is, it will NOT add to the progress bar. The progress bar will be added to, a trigger right before the "Slide_Complete_1" variable is changed to it's value indicating that the slide is complete.

That may sound confusing, but it's basically saying that you're using a variable on each slide to avoid having the percentage added to more than once for a slide if a user revisits and has completed the slide.

I can put together a small example for you later tonight if you still need help.

Abhishek Roy

so, do i need to create a progress bar with 53 states adding some length to it when a user visits a slide? i have to divide the progress bar into 53 that what you're telling about ?

if i take 100% as the total and divided that by total no. of slides i.e. would be around 2% for every slide.for slide 1 it would be 2%, slide 2 ---> 4%, ..... slide 5 ----> 10% . now if a user jumps to slide 5 from slide 1 instead of slide 2, how would the progress bar calculate the percentage completed ? 


it' easy for a linear course. but mine is non-linear. is that what i'm concerned should not miscalculate the progress bar percentage completed when a user jumps aorund.

Daniel Sposato (Philly)

Hey,I have to apologize.... this example I made doesn't work correctly. I was testing and building this under the assumption that the main master slide would not reset itself when a slide advanced to another slide. It turns out it does. So I am adjusting my example and will let you know when I have a working solution. Sorry.

Daniel Sposato (Philly)

Hey, I have a working solution attached! And I explain how it works inside of it.

One thing you may want to do is remake all of the states for your progress bar. I used images that i quickly exported from Flash CC. And they work fine, but the fact that they are 53 individual images seems to make it take a while to load between pages.

What you can do is go into each state and make a blue bar (by drawing it in SL2) and match up the length to the images (so you don't have to guess at the lengths for the percentages. Then move the bar over the image and delete the image. Unfortunately you'll have to do that 53 times, but that should fix the loading time between slides issue.

This example is simple overall, but there are a number of things you need to put in place for it to work correctly. If you need any more help understanding this feel free to ask.

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