JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <br>
  <h4 class="text-center">Importando arquivos</h4>
  <div class="container">
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
        <span class="sr-only"></span>
      </div>
    </div>
  </div>
  <div class="text-center">
    <br>
    <br>
    <button class="btn btn-primary" id="zeraProgressBar">
      Zerar Progress Bar
    </button>
  </div>

</div>

JavaScript

var progressBar = $(".progress-bar");

var acionaProgresso = setInterval(addProgress, 1000);

function addProgress() {
  var width = progressBar.width() + 40;
  progressBar.width(width);
}

$("#zeraProgressBar").click(function() {
  progressBar.css('-webkit-transition', 'none').css('transition', 'none');
  progressBar.width('0%');
  clearInterval(acionaProgresso);
});