Skip to main content
removeu 32 caracteres do conteúdo
Fonte Link

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/

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/

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) {
  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/

adicionou 952 caracteres ao conteúdo
Fonte Link
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;
        
        //Percentual processado
        console.logaddProgress(percentComplete * 100 + '%');
        
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        // Percentual processado
        console.logaddProgress((percentComplete * 100) + '%');
        
      }
    }, false);
    return xhr;
  },
  type: 'POST', //Or 'GET',
  url: "URLDeConsulta""http://posttestserver.com/post.php",
  data: data,{
  success: function(data) {post: true,
    postfor: 'fun'
 // Oque},
 você desejarsuccess: fazerfunction(data) com{
 o resultado  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>
$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        //Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        // Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "URLDeConsulta",
  data: data,
  success: function(data) {
      // Oque você desejar fazer com o resultado
  }
});
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>
removeu 11 caracteres do conteúdo
Fonte Link

Segue uma possível solução, esta solução se baseia no subscribe do evento progress da XMLHttpRequest utilizada pelo helper $.ajax da jQuery.

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        //Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        // Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    return xhr;
  },
  type: 'POST' //Or 'GET',
  url: "URLDeConsulta",
  data: data,
  success: function(data) {
      // Oque você desejar fazer com o resultado
  }
});

segue um exemplo: http://jsfiddle.net/xvv2whsb/

Segue uma possível solução, esta solução se baseia no subscribe do evento progress da XMLHttpRequest utilizada pelo helper $.ajax da jQuery.

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        //Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        // Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    return xhr;
  },
  type: 'POST' //Or 'GET',
  url: "URLDeConsulta",
  data: data,
  success: function(data) {
      // Oque você desejar fazer com o resultado
  }
});

Segue uma possível solução, esta solução se baseia no subscribe do evento progress da XMLHttpRequest utilizada pelo helper $.ajax da jQuery.

$.ajax({
  xhr: function() {
    var xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        //Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    xhr.addEventListener("progress", function(evt) {
      if (evt.lengthComputable) {
        var percentComplete = evt.loaded / evt.total;
        
        // Percentual processado
        console.log(percentComplete * 100 + '%');
        
      }
    }, false);
    return xhr;
  },
  type: 'POST',
  url: "URLDeConsulta",
  data: data,
  success: function(data) {
      // Oque você desejar fazer com o resultado
  }
});

segue um exemplo: http://jsfiddle.net/xvv2whsb/

removeu 8 caracteres do conteúdo
Fonte Link
Carregando
Fonte Link
Carregando