Forum Discussion

Nedim's avatar
Nedim
Community Member
19 hours ago

NRPSupport​ 

If I need to, I also use a JavaScript-animated progress bar. There are many ways to build a progress bar, but most of what I’ve seen so far uses JavaScript. The built-in way would look similar to what you were trying to build with single images, but it would require creating additional states, where each state represents a certain point in the overall progress bar. This could become a tedious and time-consuming process, especially if your project grows from 4 slides to 20 slides or so. You would then have to readjust the progress bar states, adding more or removing existing ones, etc.

Another good practice is to have the progress bar running on a Slide Master rather than having a separate progress bar instance on each slide. Having the progress bar on a Slide Master would allow for better visibility, maintainability, and an easier overall editing process, while ensuring that every slide using that master has a progress bar visible. In my personal opinion, I don’t think a progress bar should look too fancy. I personally prefer a simple, static progress bar running at the top of the player rather than having it directly on the slide itself. Anyway, I have two examples of progress bars for you.

The first is a static one using a modified Storyline Slider element. The left side of the slider track represents the progress made, while the portion ahead of the slider knob represents the remaining progress. It aligns with your original concept and general idea of having a progress knob. The slider itself should be disabled in its initial state.

The second example is a simple line with a thicker width and another line underneath it acting as the progress bar holder. This one is animated with GSAP (a JavaScript animation library) and can easily be adjusted to match any color or design.

Let me know if you’re comfortable with a JavaScript-based solution for the progress bar or if you would prefer a more built-in approach. I can upload both Storyline files with either option.

SLIDER

ANIMATED LINE