Segue uma possível solução, esta solução se baseia no subscribe do evento `progress` da `XMLHttpRequest` utilizada pelo helper `$.ajax` da jQuery. <!-- begin snippet: js hide: false --> <!-- language: lang-js --> var progressBar = $(".progress-bar"); function addProgress(percentual) { console.log(percentual); progressBar.width(percentual); }; $.ajax({ xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; addProgress(percentComplete * 100 + '%'); } }, false); xhr.addEventListener("progress", function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; addProgress((percentComplete * 100) + '%'); } }, false); return xhr; }, type: 'POST', //Or 'GET', url: "http://posttestserver.com/post.php", data: { post: true, postfor: 'fun' }, success: function(data) { alert(data); } }); <!-- language: lang-html --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <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> <!-- end snippet --> segue um exemplo: http://jsfiddle.net/xvv2whsb/