बूटस्ट्रैप पेज लोड प्रोग्रेस बार एनीमेशन

Question

मैं एक पृष्ठ को एक div में लोड करना चाहता हूं और पृष्ठ लोड होने पर एक प्रगति पट्टी प्रदर्शित होता है (अधिमानतः पेज लोड की वास्तविक प्रगति के करीब कुछ हद तक) और फिर पेज लोड होने के बाद स्लाइडअप बार और सामग्री प्रदर्शित करें।

घटनाओं की वर्तमान श्रृंखला:

1. उपयोगकर्ता क्लिक लिंक
2. प्रगति बार स्लाइड नीचे
3. प्रगति बार पृष्ठ लोड करने के लिए उत्साहित
4. प्रगति बार स्लाइड ऊपर
5. पृष्ठ सामग्री प्रदर्शित करता है

कोड:

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 
    $('#mainframe').load(url,function(){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 
    }); 
} 

1. मैं इस कोड संसाधन लोड की वास्तविक प्रगति मैच के लिए कैसे संशोधित है?
2. सामग्री प्रकट होने से पहले मैं div को कैसे स्लाइड कर सकता हूं?

======= संपादित =======

जवाब में कोड का उपयोग नीचे मैं सिर्फ चौड़ाई 80% से पहले प्राप्त समारोह कॉल तो सफलता में सेट कॉल इसे 100% पर सेट करें। div गिरावट और फिर एचटीएमएल

 function pageLoad(url){ 
       $('body').css('cursor','wait'); 
       $('#mainframe').html(''); 
       $('#page-load-wrap').slideDown(); 
       $('#page-load-indicator').css('width','80%'); 

       $.get(url,function(data){ 
       $('#page-load-indicator').css('width','100%'); 
       $('#page-load-wrap').slideUp('slow',function(){ 
        $('#mainframe').html(data); 
       }); 
       $('body').css('cursor','default'); 
       }); 
      } 

Answer 1

मैं इस कोड संसाधन लोड की वास्तविक प्रगति मिलान करने के लिए कैसे को संशोधित करेगा दिखाया गया है?

आप केवल जावास्क्रिप्ट के साथ नहीं कर सकते हैं।

सामग्री प्रकट होने से पहले मैं div को कैसे स्लाइड कर सकता हूं?

उपयोग $.get बजाय, क्योंकि यह आप सामग्री सेट करने से पहले ऊपर की ओर स्लाइड करने के लिए अनुमति देता है:

function pageLoad(url){ 
    $('body').css('cursor','wait'); 
    $('#page-load-wrap').slideDown(); 
    width = $('#page-load-indicator').css('width','100%'); 

    $.get(url,function(data){ 
     $('#page-load-wrap').slideUp(); 
     $('body').css('cursor','default'); 

     // and load the html 
     $('#mainframe').html(data); 
    }); 
}