Bootstrap Progress Meter

Hi All,

After a little bit more work on this, I've managed to now get the player to display the variable as a text overlay on top of the progress bar.

This can be done by adding a new div to the variable 'progressBar' that is held within the Master Template. - See below:

var progressBar = '<div class="progress" style="height:21px; width:150px; position: absolute; margin: auto; right: 0; left: 0; top: 0px; bottom: 15px"><div class="progress-bar" id="my_progress" role="progressbar" aria-valuenow="0" aria-valuenow="0" aria-valuemax="100" style="width:0%;margin:0 !important;background-color:#C9D140 !important;"></div><div class="percentage" style="text-align:center; position: absolute; margin-left:43%; top:5px; font-weight:bold; color:#304EA0"></div></div>';

Within this div you can choose where to display your text, due to the size and width of mine I've opted for 43% left to centre the text. you can also style the text within this div, again changing the colour using a hex code.

The next thing to do so the text updates dynamically is to add the following:

//Add numerical value to the progress bar
$('.percentage').text(myProgress+'%');

This needs to be added to the JS trigger that is on each slide you are using to amend the variable 'Progress' in Storyline. - This will then take the div 'percentage' and fill it with the variable stored in 'myProgress' that was defined earlier on.

I've tested this on all the major browsers and it works loverly however due to the styling options chosen it looks a little odd on Firefox so the next task it to get that looking sharp on all browsers.

Hopefully this will aid someone either who has previously looked into this or at least coming into this fresh.

Again I've added an updated SL file with all the triggers required.