Reports

Based on the first answer I tried using a linear-gradient as can be seen in the code snippet.

const progressBarContainer = document.querySelector(".progress-bar-container");

const button = document.querySelector("button");
progressBarContainer.style.setProperty("--progress", "0")
button.addEventListener("click", (e) => {
    const current = +progressBarContainer.style.getPropertyValue("--progress");
    progressBarContainer.style.setProperty("--progress", `${current + 10}`);
})

.progress-bar-container {
    outline: 1px solid black;
    position: relative;
    background: white;
      --progress: 0;
}

.progress-bar {
    height: 5px;
    transition: width 1s ease-in-out;
    position: relative;
        width: calc(var(--progress) * 1%);
}

.progress-bar:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: linear-gradient(
                #ff4d62 0% 30%,
                #FF6D5B 30% 40%,
                #FF8C54 40% 50%,
                #FFAA61 50% 60%,
                #FFC76D 60% 65%,
                #FFE57A 65% 70%,
                #D9E27D 70% 80%,
                #B3DF80 80% 85%,
                #8EDC82 85% 90%,
                #68D985 90% 95%,
                #42D688 95% 100%,
                #3EC67B 100%
        );
        background-size: auto 100px;
        background-position: 0 calc(var(--progress) * -1px);
}

<div class="progress-bar-container">
    <div class="progress-bar"></div>
</div>
<button>Increase progress</button>

For some reason the gradient returns to the first color (red) when background-position is at 0 -96px to 0 -100px. Why is that? I didn't expect that. I also can't make it work with positive numbers going from 0px to 100px. If someone can explain that as well it will be great.

79207132