Jquery Form Ajax Loadinge Progress Bar Tanımlamak

Merhaba

Ben wm aracındaki gibi site analiz kodlaması yapmaktayım. Kodlamanın Php ve Tasarımsal kodlamalarını bitirdim.Bilgileri doğru ve wm aracındaki gibi her satırda loading.gif dönerek çekiyor. Ancak ben biraz farklılık yaratmak için bu loading.gifi kaldırıp [url=www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html] buradaki gibi [/url] bir loading bar eklemek istiyorum.Yani site adresi girildiği zaman bu bar gözükecek ve dolarken örneğin index bilgileri çekildi alexa bilgileri çekildi gibi yazılar çıkacak.Bunun için bana yardımcı olabilir misiniz?

Kullandığım jquery kodu

function gonde2r(){
var url = $("#url").val();
window.location="/sitemapping/url/"+$("#url").val()+"/";
}
function gonder(){

$("#sonuc").html("<img src='/loading.gif' />");
$("#sonuc1").html("<img src='/loading.gif' />");
$("#sonuc2").html("<img src='/loading.gif' />");

$.ajax({
type:'POST',
url:'/kontrol/googlesitemap.php',
data:$('#veri-formu').serialize(),
success:function(cevap){
    
    $("#sonuc").html(cevap)

}

})

$.ajax({
type:'POST',
url:'/kontrol/yandexsitemap.php',
data:$('#veri-formu').serialize(),
success:function(cevap){
    
    $("#sonuc1").html(cevap)

}

})

$.ajax({
type:'POST',
url:'/kontrol/bingsitemap.php',
data:$('#veri-formu').serialize(),
success:function(cevap){
    
    $("#sonuc2").html(cevap)

}

})

}

Loading barın örnek anlatımı : http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html
Şimdiden teşekkür ederim.