Menu
I am trying to display loading.gif/spinning wheel whenever a user clicks the button. I have added a div as below in the master page:
<div id="loadingDiv"> <div> <h7>Please wait...</h7> </div> </div> This is the css:
#loadingDiv{ position:absolute; top:0px; right:0px; width:100%; height:100%; background-color:#666; background-image:url('ajax-loader.gif'); background-repeat:no-repeat; background-position:center; z-index:10000000; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } When I try this, the loading.gif is displayed at the center of the page. But as the page is really long , I have to scroll in order to see the loading.gif.
How can I display the loading.gif at the center of the screen which is visible? And if I scroll down, I should see that again at the center of the screen.
725
Here's the solution. . JS FIDDLE DEMO
HTML
<body> <div class="content"> Long Content Here <br/> Click to view loading image. </div> <div id="divLoading"> </div> CSS
#divLoading { display : none; } #divLoading.show { display : block; position : fixed; z-index: 100; background-image : url('http://loadinggif.com/images/image-selection/3.gif'); background-color:#666; opacity : 0.4; background-repeat : no-repeat; background-position : center; left : 0; bottom : 0; right : 0; top : 0; } #loadinggif.show { left : 50%; top : 50%; position : absolute; z-index : 101; width : 32px; height : 32px; margin-left : -16px; margin-top : -16px; } div.content { width : 1000px; height : 1000px; } jQuery
$(document).ready(function(){ $("div.content").click(function(){ $("div#divLoading").addClass('show'); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
