Add Course Progressbar in Storyline Player

let player = GetPlayer();
let value = player.GetVar("Progress");

let tabsDiv = document.getElementById('tabs');


let progressContainer = document.createElement('div');
progressContainer.setAttribute('style', 'height:5px; width:100%; margin-top:5px;');
progressContainer.setAttribute('id', 'progressContainer');


let progressbar = document.createElement('div');
progressbar.setAttribute('style', 'height:5px; width:0%; transition: width 1s;');
progressbar.setAttribute('id', 'progressbar');


let progressText = document.createElement('div');
progressText.innerHTML = value + '% Completed';
progressText.setAttribute('style', 'text-align:center; width:100%; position:absolute;');


progressContainer.appendChild(progressbar);
progressContainer.appendChild(progressText);


tabsDiv.appendChild(progressContainer);


let color = getComputedStyle(document.querySelector('.selected-animation-done'), ':after').getPropertyValue('background-color');


progressbar.style.backgroundColor = color;


let colorRGB = color.match(/\d+/g); // get the rgb values
let lighterColor = `rgba(${Math.min(255, colorRGB[0] * 1.2)}, ${Math.min(255, colorRGB[1] * 1.2)}, ${Math.min(255, colorRGB[2] * 1.2)}, 0.5)`;


progressContainer.style.backgroundColor = lighterColor;


progressbar.style.width = value + '%';