index.js

lyrics.forEach((item) => {
      let line = document.createElement("div");
      // make a progress bar which fills up in the duration of the line
      let progressBar = document.createElement("div");
      line.dataset.time = item.startTimeMs / 1000;
      progressBar.style.setProperty('--blyrics-duration', `${item.durationMs / 1000}s`);
      progressBar.classList.add("blyrics--progress-bar");

      const words = item.words.split(" ");
      if (!allZero) {
        line.setAttribute("data-scrolled", false);
        line.setAttribute(
          "onClick",
          `const player = document.getElementById("movie_player"); player.seekTo(${
            item.startTimeMs / 1000
          }, true);player.playVideo();`
        );
      } else {
        line.classList.add(BetterLyrics.Constants.CURRENT_LYRICS_CLASS);
      }
      
      words.forEach((word, index) => {
        let span = document.createElement("span");
        span.style.transitionDelay = `${index * 0.05}s`;
        span.style.animationDelay = `${index * 0.05}s`;
        span.textContent = words.length <= 1 ? word : word + " ";
        line.appendChild(span);
      });
      if (translationEnable) {
        let transcriptionLine = document.createElement("span");
        transcriptionLine.classList.add("blyrics--transcription");
        transcriptionLine.style.display = "block";
        let translatedLine = document.createElement("span");
        translatedLine.classList.add(BetterLyrics.Constants.TRANSLATED_LYRICS_CLASS);
    
        if (item.words.trim() !== "♪" && item.words.trim() !== "") {
          if (!item.translatedLines) {
            BetterLyrics.Translation.translateText(item.words, targetLanguage).then((result) => {
              if (result && result.originalLanguage !== targetLanguage) {
                translatedLine.textContent = result.translatedText;
                line.appendChild(translatedLine);
              }
            });
          } else {
            translatedLine.textContent = item.translatedLines;
            if(!item.transcription) {
              line.appendChild(translatedLine);
            } else {
              transcriptionLine.textContent = item.transcription.trim("\n");
              line.appendChild(transcriptionLine);
              line.appendChild(translatedLine);
            }
          }
        }
      }
      line.appendChild(progressBar);
      try {
        document.getElementsByClassName(BetterLyrics.Constants.LYRICS_CLASS)[0].appendChild(line);
      } catch (_err) {
        BetterLyrics.Utils.log(BetterLyrics.Constants.LYRICS_WRAPPER_NOT_VISIBLE_LOG);
      }
    });


.blyrics--progress-bar {
  height: 10px; /* Standard height for progress bar */
  width: 0; /* Start at 0% width */
  max-width: 60rem; /* Limit maximum width */
  background: linear-gradient(90deg, #FF0000, rgba(255, 0, 0, 0)); /* Gradient effect */
  animation: progressBarAnimation var(--blyrics-duration) ease-in forwards;
  border-radius: 5px;
}

@keyframes progressBarAnimation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}