Mostrar uma "progress bar" ao usar $.ajax

  • Autor Autor kurosaki
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
K

kurosaki

Beta
Domainer
No recomendado
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola amigos.
Verán, en mi pagina, hago un $.ajax({});, para mandar unos valores y guardarlos sin refrescar nada.

Lo que quiero lograr y no he podido es, poner un progress bar.

Ya se hacer lo de poner alguna imagen GIF o un letrero que diga "cargando".
PERO AHORA... lo que quiero es lograr mostrar el porcentaje de la ejecucion esa peticion ajax.

ejemplo.

Envio un nuevo registro con ajax.
NOMBRE, EDAD, CORREO, CONTRASEÑA

$.ajax({
type:'POST',
dataType:'json',
url:'ajax.php',
data:{},
beforeSend: function() {
// AQUI MOESTRABA EL GIF DE LOADING
},
success: function(e) {
alert("se insertaron los datos con exito");
}
});

pero en vez de mostrar el gif quiero mostrar el porcentaje, Nose si me explico.
Existe una manera natural con jquery o necesito plugins externos?

GRACIAS.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Puedes utilizar el componente de Bootstrap : Progress bars Components · Bootstrap
Se trata de una capa que con sólo modificar el atributo width te dibuja la barra de progreso en el porcentaje que indiques, lo mejor es que es totalmente responsive. Hay varios diseños, colores e incluso animada. Claro, esto solo la dibuja, requerirías otra función para ir modificando el porcentaje.

HTML:
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
 
Última edição:
La solución qué te propone ingcrisramirez es una buena solución.

Otro cantar es la función que comprueba el porcentaje a cada rato y lo refleja en la progress-bar. Porque el problema, es que no tienes una forma fácil de saber cuánto te falta para que se complete esa petición AJAX. En el beforeSend estás al 0% y en el sucess ya estás al 100%. Así que tienes que usar el controlar del evento onprogress del objeto XMLHttpRequest para tal fin. en jQuery sería similar. Aquí te lo explican muy bien. javascript - JQuery ajax progress via xhr - Stack Overflow

Un saludo
 
Voltar
Topo