Customizing Progress Bar In Articulate Storyline


This blog post shares how to customize progress bar in articulate storyline.

Customizing Progress Bar In Articulate Storyline

Progress bar in an eLearning course is a component of GUI that lets the learners knows about their progress in the course visually. Do you think such progress bar in Articulate Storyline can be customized? Can it be modified according our requirement? Yes, we can.

We have created a custom progress bar in Articulate Storyline for one of our clients.

Here I would like to share how we have done in the following steps.

1. Start a new project in Storyline, set story size as per your requirement.

Set Story Size

2. Go to “Player properties” and deselect the highlighted options as shown in image below.

Set Player Properties

3. Using the shapes tool, draw a rectangle at the bottom of your slide and also draw another rectangle (white colored) as background to your progress bar.

Draw a square using Shape tool

4. Now draw a smaller rectangle on the timeline to display the status of the slide as shown below.

Draw a smaller rectangle

5. Now copy the “smaller rectangle” and paste it on timeline and adjust its position as shown below. You can give 2-3 frame gap between each “smaller rectangle”

Paste it on timeline

6. You need to copy and paste the “smaller rectangles” based on your audio length. For example if your audio length would be 30 seconds then you need to take the objects until end of the audio.

Take the objects until end of the audio

That’s it. It‘s an easy way to customize the progress bar of Articulate storyline. Here is the screenshot which shows the difference between a default and customized progress bar in Storyline.

default and customized progress bar in Storyline

I hope you have learnt something new out of my blog, please do share your comments.

How to Select the Right Rapid Authoring Tool

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Copy link