کد لودینگی که درصد لود شدن صفحه را نمایش می دهد (به همراه آموزش نصب)

loading 50%

همانطور که در بالا می بینید شک کد لودینگ قرار داده شده است که البته یک دمو می باشد و در اینجا کار نمی کند.
شما با استفاده از این آموزش می تونید در وب خودتون کد لودینگی را قرار دهید که در اون شما می تونید درصد لود شدن صفحه رو بزنید.

یه کد جالب براتون درست کردم که مشکلش اینه که باید دستی درصد هاشو وارد کنی.
چون قالب هنوز کامل لود نشده پس امکانش نیست که مرورگر بفهمه که چه اندازه از قالب کاملا لود شده به خاطر همین باید اینطوری عمل کرد.
اول از همه این کد رو بذارید توی head قالبتون:

<script>
function loading(no){
document.getElementById('textload').innerHTML='loading '+no+'%';
document.getElementById('loadbox').style.width=no+'%';
}
function del(){
document.getElementById('moisrexboxload').style.display='none';
}
</script>
<style>
#moisrexboxload{
position:absolute;
top:10px;
left:50%;
width:300px;
margin-left:-150px;
border:1px #ccc solid;
border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius:5px;
-webkit-border-radius:5px;
-o-border-radius:5px;
-khtml-border-radius:5px;
background:#fff;
padding:10px;
}
#bgloadbox{
width:150px;
height:20px;
background-image:url(https://www.rozblog.com/images/rank/0.gif);
background-repeat:no-repeat;
background-position:top left;
text-align:left;
}
#loadbox{
width:20%;
height:20px;
background-image:url(https://www.rozblog.com/images/rank/0.jpg);
background-repeat:no-repeat;
background-position:topleft;
float:left;
}
#textload{
font-size:10px;
font-family:"Comic Sans MS",Tahoma;
}
</style>

بعدش این رو بذارین اول های body قالبتون:

<center id="moisrexboxload"><div id="bgloadbox"><div id="loadbox"></div></div><div id="textload"></div></center>

بعدش اینو بذارین آخر آخر قالبتون برای حذف کردن میزان لودینگ:

<script>del();</script>

بعدش مثلا داخل 25 درصدی قالبتون کد زیر رو بذارید و بعدش داخل 50 درصدی قالبتون همین کد رو بذارین و فقط به جای 25 بذارین 50 و همینطور تا هر جا که بخواین بذارین:

<script>loading('25');</script>