ajax then progress,javascript - How to show progress bar while loading, using ajax - Stack Overflow

Here is an example that's working for me with MVC and Javascript in the Razor. The first function calls an action via ajax on my controller and passes two parameters.

function redirectToAction(var1, var2)

{

try{

var url = '../actionnameinsamecontroller/' + routeId;

$.ajax({

type: "GET",

url: url,

data: { param1: var1, param2: var2 },

dataType: 'html',

success: function(){

},

error: function(xhr, ajaxOptions, thrownError){

alert(error);

}

});

}

catch(err)

{

alert(err.message);

}

}

Use the ajaxStart to start your progress bar code.

$(document).ajaxStart(function(){

try

{

// showing a modal

$("#progressDialog").modal();

var i = 0;

var timeout = 750;

(function progressbar()

{

i++;

if(i < 1000)

{

// some code to make the progress bar move in a loop with a timeout to

// control the speed of the bar

iterateProgressBar();

setTimeout(progressbar, timeout);

}

}

)();

}

catch(err)

{

alert(err.message);

}

});

When the process completes close the progress bar

$(document).ajaxStop(function(){

// hide the progress bar

$("#progressDialog").modal('hide');

});