How I Made This Progress Meter in Storyline 360

Including a progress meter in your e-learning course is a great way to give learners visual feedback about how far along in the course they are. Progress meters can take many shapes and forms, but typically you’ll see a bar near the bottom of the slide that fills up as the learner moves forward in the course, like in the animated .GIF below. 

Click here to see the interactive version.

It’s particularly useful to include a progress meter in longer courses, so learners can estimate how much longer they’ll need to finish the course and can then decide whether to finish up or come back later. Orienting learners also helps prevent them from feeling lost or overwhelmed due to having no clue as to where they are in a course.

Thanks to slide numbers in Storyline 360, you can create a custom progress meter like the one above by adding a single trigger. Let me quickly walk you through how I created mine.

1. Insert & Format a Slider

If you want the progress bar to appear on all your slides, you’ll need to put it on your slide master. To do that, open the view tab and click Slide Master.

From there, open the insert tab, click Slider, and select one of the slider options. For this example, it doesn’t really matter which one you choose because of the formatting options you’ll apply later.

Next, go ahead and insert a thin rectangle that’s the same length as your slide. This rectangle will be what fills up the progress bar as the learner advances through your course. With your rectangle selected, choose the fill color you want and select No Outline.

When you’re happy with the formatting, right-click on the rectangle and choose Export Shape as Picture. Save your rectangle to an easy-to-find location—like your desktop—and give it a name that’s easy to identify.

Then, click on the rectangle in your project, go down to the timeline, and click on the eye to hide it. We’ll use it again later, but for now we want to make sure it doesn’t get in the way.

Now, select your slider, open the format tab, click Thumb Fill, select Picture, and browse for the rectangle you just saved.

The next step is to adjust the size of your slider until the rectangle (or thumb) is entirely off the slide, as shown in the animated .GIF below.

If you’ve set it up correctly, the rectangle (or thumb) should be completely off the slide. The part of the track that's on the slide should be empty but take up the entire width of the slide, like in the screenshot below:

Once your slider is the right size, you’ll format it to look the way you want. For this example, you’ll choose No Outline for the thumb border ...

… and No Fill and No Outline for the track fill and border.

Next, unhide that rectangle you used to create the slider thumb. You’re going to use this rectangle to create the outline of the progress bar. For this example, get rid of the fill color and add a gray contour, so it looks like the screenshot below.

Then move your slider and rectangle to the bottom of the slide and line them up. You want the rectangle to be slightly taller than the slider thumb—as pictured below—so you might need to adjust the height of your rectangle.

Once your rectangle is the right height, center it on your slide.

Finally, click on your slider, open the design tab, and change the end value to 100.

2. Create a Trigger

Now that your slider is all set up, you’ll need to add a trigger to make it show your learner’s progress. Here’s what the trigger should look like:

Note that the object should be the name of your master slide, so it might be different than what you see above.

3. Insert a Hotspot

Next, you’ll want to add a hotspot to prevent learners from clicking on the slider and changing its position manually. To do that, simply open the insert tab, click Hotspot, and select the rectangle.

Then, right-click on your hotspot and uncheck Show Hand Cursor on the hover option so learners don’t think there’s something to click on.

If you’d like, you could stop here! Your progress bar should now be fully functional. However, if you want to take it further, move on to step four.

4. Add a Hover State (Optional)

To take your progress bar to the next level, add the exact percentage of the course that’s been completed to the hover state for learners to see when they hover over the progress meter.

To do so, open the insert tab, choose Slide Number, and click More in the drop-down menu.

Then select Progress through project (or Progress through menu, if you’re using the menu order to number your slides) and click on the place you’d like to insert it on your slide.

The percentage will appear in a textbox, like this:

From there, you can format the text—change the color, for example—and move it to the exact spot you’d like it to appear, like I’ve done below:

To make the hover state work, you’ll need to add a trigger since there’s a hotspot preventing the learner from interacting with the slider. Here’s what that trigger should look like:

And that’s it! Now your learners can see how they’re progressing through your course. Here’s what the end result looks like. Keep in mind that this isn’t the only way to create a progress meter. Feel free to get creative! Want to download my file to better understand how I've set everything up? Pop on over to this page.

More Resources

Want to learn more about the slide number feature? Check out this article for ideas of ways to use this feature and this tutorial for a step-by-step guide on adding slide numbers to your project.

If you want to try something you learned here, but don’t have Articulate 360, why not start a free 30-day trial? And be sure to subscribe to our newsletter to get the latest e-learning inspiration and insights directly in your inbox. You can also find us on LinkedIn and X (Formerly Twitter).