JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://twitter.github.com/bootstrap/assets/css/bootstrap.css' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



    <div id="announcement">Checking your answers!</div>
    
        
        <div class="progress-bar progress-bar-striped active">
    <span class="bar" style="width: 0%;"></span>
  </div>
    
    <div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="bar">45% Complete</span>
  </div>
</div>

JavaScript

var progress = setInterval(function() {
    var $bar = $('.bar');

    if ($bar.width()==400) {
        clearInterval(progress);
        $('.progress').removeClass('active');
        $("#announcement").text("Approved!");
    } else {
        $bar.width($bar.width()+40);
    }
    $bar.text($bar.width()/4 + "%");
}, 900);