Skip to content

Customizing Progress Bar In Articulate Storyline

P rogress 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.

Authoring Tool Finder - Find the Best Suited Authoring Tool for Your Needs