2011-08-12 11 views
12

मैं पृष्ठ को मंद करना और लोडिंग सूचक दिखाना चाहता हूं। मुझे jQuery सेट मिला। यह सीएसएस है कि मैं काम नहीं कर सकता। यह पृष्ठभूमि को कम कर रहा है जो मैं नहीं कर सकता। कोई विचार?पृष्ठ को मंद करें और लोडिंग सूचक दिखाएं

#Loading 
{ 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    height: 31px; 
    width: 60px; 
    left: 50%; 
    top: 35%; 
    background-image: url('../Images/ajax-loader-bright.gif'); 
    background-repeat: no-repeat; 
} 

उत्तर

20

आप सीएसएस 3 के रूप में अपने प्रश्न टैग किया है के बाद से:

background: rgba(0,0,0,.5) url('../Images/ajax-loader-bright.gif') no-repeat; 
width:100%; 
height:100%; 
position:fixed; 
top:0; 
left:0; 
z-index:999; 

आप rgba युक्त लाइन में अल्फा (.5) बदलकर मद्धिम स्तर समायोजित कर सकते।

+1

यह लोडर को बीच में नहीं रखता है, यह मेरे बाएं कोने में –

+3

मध्य में रखने के लिए बस पृष्ठभूमि घोषणा के अंत में '50% 50%' जोड़ता है। – Litek

3

आप इस्तेमाल कर सकते हैं एक अलग div बिल्कुल चौड़ाई और ऊंचाई 100% पर सेट के साथ तैनात:

यह मैं क्या मिल गया है (पेज के केंद्र में सूचक दिखाता है)। फिर इस div की पृष्ठभूमि को # 000 (काला) और इसकी अस्पष्टता 50% तक सेट करें (या जो भी मंदता आप चाहते हैं)।

<div id='dim_wrapper' style='width:100%; height:100%; background:#000; z-index:10'>&nbsp;</div> 
<script> 
$("#dim_wrapper").animate({ 
    'opacity':0.5 
}); 
</script> 
+1

प्लस एक ज़ेड-इंडेक्स 0 से अधिक –

+0

क्या यह दूसरे को लपेटना चाहिए? –

+0

कोई भी अलग नहीं होना चाहिए जबतक कि आप संकेतक को अस्पष्टता पर भी लागू नहीं करना चाहते हैं। –

3

jQuery का उपयोग कर मंद पृष्ठ बनाने के लिए साथ/छवि के बिना भी इस प्लगइन http://jquery.malsup.com/block/#demos

साथ किया जा सकता ajax लोड हो रहा है पृष्ठ है http://www.ajaxload.info/ जो भयानक है उत्पन्न करने के लिए।

संबंधित मुद्दे