Я не использую jquery, но это может помочь вам.
Это анимированный индикатор прогресса Ajax с поддельным отступлением.
я просто передаю поддельный размер, зная средний размер моих скриптов
поэтому, если мои скрипты имеют размер около 50-100 КБ, я устанавливаю поддельный размер 150 КБ.
если вычисленная длина недоступна, я использую поддельный размер.
в этом скрипте я также добавил дополнительную проверку, что размер бара всегда меньше, чем контейнер.
просто умножением поддельного размера * 2 .., если он меньше загруженных данных.
чтобы все выглядело хорошо, я добавил также эффект перехода css3, чтобы он задерживал 700 мс.
эта задержка анимации добавляет все, что вам нужно, чтобы индикатор выполнения выглядел реально.
Скопируйте и вставьте в HTML-файл и проверьте с помощью современного браузера, как Chrome.
замените ТВОЙ САЙТ сайтом с содержанием ajax ... или чем-то другим.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax Progress</title>
<style>
#progress{
width:300px;
height:20px;
border:1px solid rgba(0,0,0,0.5);
}
#bar{
width:0%;
height:20px;
background-color:green;
-webkit-transition:width 700ms ease;
}
</style>
<script>
var
pb,
fakeSize=100000,//~100kb
progress=function(e){
fakeSize=(e.loaded>fakeSize?(fakeSize*2):fakeSize);//Bonus
var tot=(e.lengthComputable?e.total:fakeSize);
pb.style.width=(100/tot*e.loaded)+'%';
},
onloaded=function(e){
pb.style.width='100%';
},
ajax=function(a,c){
c=new XMLHttpRequest;
c.open('GET',a);
c.onprogress=progress;
c.onload=onloaded;
c.send()
};
window.onload=function(){
pb=document.getElementById('bar');
ajax('YOURSITE');
}
</script>
</head>
<body>
<div id="progress"><div id="bar"></div></div>
</body>
</html>
вам просто нужно использовать функцию прогресса в jquery, а затем установить бар на 100%, когда скрипт загрузится.