I want to make a progress bar which loads to 100% in x seconds and whatever is the progress to be able to reset it via js.

I am using bootstrap and @keyframes to animate the bar:

<!-- CSS -->
@keyframes load{
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
.progress-bar.load{
    animation-name: load;
    animation-duration: 60s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
}

<!-- HTML -->
<span class="progress" style="height: 1px;">
    <span class="progress-bar load" id="myProgressBar">
</span>

And in js I try to reset the progress:

progressBar.classList.remove("load");
progressBar.classList.add("load");

But the progress is not reset.