Javascript timer progress bar enhanced

console.clear();

/*
 *  Creates a progressbar.
 *  @param id the id of the div we want to transform in a progressbar
 *  @param duration the duration of the timer example: '10s'
 *  @param callback, optional function which is called when the progressbar reaches 0.
 */
function createProgressbar(id, duration, callback) {
  // We select the div that we want to turn into a progressbar
  var progressbar = document.getElementById(id);
  progressbar.className = "progressbar";

  // We create the div that changes width to show progress
  var progressbarinner = document.createElement("div");
  progressbarinner.className = "inner";

  // Now we set the animation parameters
  progressbarinner.style.animationDuration = duration;

  // Eventually couple a callback
  if (typeof callback === "function") {
    progressbarinner.addEventListener("animationend", callback);
  }

  // Add a div inside .inner just for the oblique bars animation
  var bars = document.createElement("div");
  bars.className = "bars";
  progressbarinner.appendChild(bars);

  // Append the progressbar to the main progressbardiv
  progressbar.appendChild(progressbarinner);

  // When everything is set up we start the animation
  progressbarinner.style.animationPlayState = "running";
}

// A variable to get the progressbar width on page load
let initialProgressBarWidth;

addEventListener("load", function () {
  let stored;
  let duration;

  // If there is a localStorage, get it and calculate the remaining duration in seconds
  if (localStorage.getItem("savedProgress")) {
    stored = JSON.parse(localStorage.getItem("savedProgress"));
    duration = Math.floor(parseFloat(stored.remainingTime / 1000)) + "s";
    console.log(stored);
  } else {
    duration = "40s";
  }

  // Create the progressBar
  createProgressbar("progressbar1", duration);

  let progressBarInner = document.querySelector(".inner");
  initialProgressBarWidth = window.getComputedStyle(progressBarInner).width;

  // If there is a localStorage, You need to override the CSS
  if (stored) {
    let newWidth =
      Math.floor(
        (parseFloat(stored.progressBarWidth) /
          parseFloat(initialProgressBarWidth)) *
          100
      ) + "%";
    let newColor = stored.progressBarBackgroundColor;
    let newAnimationDelay = Math.floor(parseFloat(stored.remainingTime / 1000));

    let style = document.createElement("style");
    let keyFrames = `
    .inner {
      height: 15px;
      animation: progressbar-countdown;
      animation-duration: ${newAnimationDelay}s;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
      animation-play-state: paused;
      animation-timing-function: linear;
    }

    @keyframes progressbar-countdown {
      0% {
        width: ${newWidth};
        background: ${newColor};
      }
      100% {
        width: 0%;
        background: #f00;
      }
    }`;
    style.innerHTML = keyFrames;
    console.log(style);
    document.getElementsByTagName("head")[0].appendChild(style);
  }
});

// A variable to get the startTime on page load
let startTime;
if (!localStorage.getItem("savedProgress")) {
  startTime = new Date().getTime();
} else {
  startTime = JSON.parse(localStorage.getItem("savedProgress")).startTime;
}
console.log(startTime);

// At each 100ms Save to localStorage
let localStorageInterval = setInterval(function () {
  let nowTime = new Date().getTime();
  let remainingTime = 40000 - (nowTime - startTime);

  let compStyle = window.getComputedStyle(document.querySelector(".inner"));
  let progressBarWidth = compStyle.width;
  let progressBarBackgroundColor = compStyle.backgroundColor;

  let savedProgress = {
    startTime,
    remainingTime,
    progressBarWidth,
    progressBarBackgroundColor
  };
  console.log(savedProgress);

  localStorage.setItem("savedProgress", JSON.stringify(savedProgress));

  // Stop the interval at the end
  if (remainingTime <= 0) {
    localStorage.setItem(
      "savedProgress",
      JSON.stringify({ ...savedProgress, progressBarWidth: "0%" })
    );
    clearInterval(localStorageInterval);
    alert("Time over");
  }
}, 100);

// Just for this demo
document.querySelector(".reset").addEventListener("click", function () {
  localStorage.clear();
});

.progressbar {
  width: 80%;
  margin: 25px auto;
  border: solid 1px #000;
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
}
.progressbar .inner {
  height: 15px;
  animation: progressbar-countdown;
  /* Placeholder, this will be updated using javascript */
  animation-duration: 40s;
  /* We stop in the end */
  animation-iteration-count: 1;
  /* Stay on pause when the animation is finished finished */
  animation-fill-mode: forwards;
  /* We start paused, we start the animation using javascript */
  animation-play-state: paused;
  /* We want a linear animation, ease-out is standard */
  animation-timing-function: linear;
}
@keyframes progressbar-countdown {
  0% {
    width: 100%;
    background: #0f0;
  }
  100% {
    width: 0%;
    background: #f00;
  }
}

.bars {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
  animation: progress-bar-stripes 1s linear infinite;
  width: 100%;
  height: 15px;
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 2rem 0;
  }
}

<div id='progressbar1'></div>
<button class="reset">Reset localStorage</button>