JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="col-sm-offset-2 col-sm-10">
  <div class="pull-left">
    <!--  data-backdrop="static" data-keyboard="false"    -->
    <button type="submit" class="btn btn-primary" id="boton" data-toggle="modal" data-target="#formularioModal" >
      <i class="glyphicon glyphicon-floppy-saved"></i>
          Guardar cuarderno
    </button>
    <button type="reset" class="btn btn-link">Cancelar</button>
  </div><!-- /pull-right -->
</div><!-- /col-sm-offset-2 col-sm-10 -->

<!-- Modal -->
<div class="modal fade" id="formularioModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
   <!-- <div class="modal-dialog">-->

   <div class="vertical-alignment-helper">
       <div class="modal-dialog vertical-align-center">
           <div class="modal-content">
               <div class="modal-header">
                   <h4 class="modal-title" id="myModalLabel">
                       Guardando archivos...
                   </h4>
               </div>
               <div class="modal-body">
                   <div class="progress">
                       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;" id="progresBarUpload">       
                       </div>
                   </div>
               </div>
           </div>
       </div>            
   </div>
</div>

JavaScript

$("#formulario").submit(function () {
  event.preventDefault();
  $("#progresBarUpload").addClass("active");
});