Progressbar in Articulate Storyline

function createProgressBar() {
  let player = GetPlayer();
  let progressValue = player.GetVar("Progress");
  let tabsDiv = document.getElementById('tabs');

  if (!document.getElementById('progressContainer')) {
    let progressContainer = document.createElement('div');
    progressContainer.id = 'progressContainer';
    progressContainer.style.cssText = 'height:5px; width:100%; margin-top:5px; background-color: rgba(255, 255, 255, 0.5);';

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

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

    progressContainer.appendChild(progressBar);
    progressContainer.appendChild(progressText);
    tabsDiv.appendChild(progressContainer);

    updateProgressBarStyle(progressBar, progressValue);
  }
}

function updateProgressBarStyle(progressBar, value) {
  let color = getComputedStyle(document.querySelector('.selected-animation-done'), ':after').getPropertyValue('background-color');
  progressBar.style.backgroundColor = color;
  let colorRGB = color.match(/\d+/g);
  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)`;
  document.getElementById('progressContainer').style.backgroundColor = lighterColor;
  progressBar.style.width = value + '%';
}

function updateProgressBar(newValue) {
  let progressBar = document.getElementById('progressbar');
  let progressText = document.querySelector('#progressContainer div:last-child');
  progressBar.style.width = newValue + '%';
  progressText.innerHTML = newValue + '% Completed';
}

createProgressBar();

let player = GetPlayer();
let progressValue = player.GetVar("Progress");
updateProgressBar(progressValue);