Segue uma possível solução, esta solução se baseia no subscribe do evento progress
da XMLHttpRequest
utilizada pelo helper $.ajax
da jQuery.
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);
}
});
<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>
segue um exemplo: http://jsfiddle.net/xvv2whsb/