stackoverflow_solve_1

index.html

<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<a href="#"><button id="testButton" class="testButton">Submit</button></a> <!--new-->
<div class="progress">
  <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
  </div>
</div>

script.js

$(function() {
  var current_progress = 0;
  
  // new
  var progress = document.getElementsByClassName("progress")[0];
  var testButton = document.getElementsByClassName("testButton")[0]; //can use ids instead
  // end
  
  var interval = setInterval(function() {
      current_progress += 10;
      $("#dynamic")
      .css("width", current_progress + "%")
      .attr("aria-valuenow", current_progress)
      .text(current_progress + "% Complete");
      if (current_progress >= 101) {
        clearInterval(interval);
        progress.style.display = "none";
        testButton.style.display = "block";
      }
  }, 1000);
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

stackoverflow_solve_1.markdown

stackoverflow_solve_1

reply to issue on Stack Overflow.

A Pen by Timothy S. on CodePen.

License.

style.css

/*new*/
body {
  margin: 20px;
}

.progress {
  width: 700px;
}


/*new*/
.testButton {
  display: none; /*hide initially*/
  padding: 8px 16px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />