Jquery-How to grey out the background while showing the loading icon over it

Question

I'm trying to grey out the background when a user clicks on the submit button and show the loading icon over the greyed background.

below is the icon im trying to show, however I'm not able to show the animation, the icon just stays still.

Here is my html:

 <div class="container"></div>  <div id="loading-img" style=" z-index: 20;display:none;"></div>  <button id="button">Submit</button> 

JS:

 $("#button").click(function() {     $("#container").css("opacity",0.5);     $("#loading-img").css({"display": "block"}); } 

I'm not sure how exactly to use the css for making the icon animate over the grey background. Any ideas please?? EDIT::::

Fiddle: http://jsfiddle.net/hnk6bLbt/1/

Thanks!

Answer 1

I reworked the example you provided in the js fiddle : http://jsfiddle.net/zravs3hp/

Step 1 :

I renamed your container div to overlay, as semantically this div is not a container, but an overlay. I also placed the loader div as a child of this overlay div.

The resulting html is :

<div class="overlay">     <div id="loading-img"></div> </div>   <div class="content">     <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea velit provident sint aliquid eos omnis aperiam officia architecto error incidunt nemo obcaecati adipisci doloremque dicta neque placeat natus beatae cupiditate minima ipsam quaerat explicabo non reiciendis qui sit. ...</div>     <button id="button">Submit</button> </div> 

The css of the overlay is the following

.overlay {     background: #e9e9e9;  <- I left your 'gray' background     display: none;        <- Not displayed by default     position: absolute;   <- This and the following properties will     top: 0;                  make the overlay, the element will expand     right: 0;                so as to cover the whole body of the page     bottom: 0;     left: 0;     opacity: 0.5; } 

Step 2 :

I added some dummy text so as to have something to overlay.

Step 3 :

Then, in the click handler we just need to show the overlay :

$("#button").click(function () {     $(".overlay").show(); }); 

Answer 2

Note: There is no magic to animating a gif: it is either an animated gif or it is not. If the gif is not visible, very likely the path to the gif is wrong - or, as in your case, the container (div/p/etc) is not large enough to display it. In your code sample, you did not specify height or width and that appeared to be problem.

If the gif is displayed but not animating, see reference links at very bottom of this answer.

Displaying the gif + overlay, however, is easier than you might think.

All you need are two absolute-position DIVs: an overlay div, and a div that contains your loading gif. Both have higher z-index than your page content, and the image has a higher z-index than the overlay - so they will display above the page when visible.

So, when the button is pressed, just unhide those two divs. That's it!

jsFiddle Demo

$("#button").click(function() {      $('#myOverlay').show();      $('#loadingGIF').show();      setTimeout(function(){  			$('#myOverlay, #loadingGIF').fadeOut();      },2500);  });  /*  Or, remove overlay/image on click background... */  $('#myOverlay').click(function(){  	$('#myOverlay, #loadingGIF').fadeOut();  });

body{font-family:Calibri, Helvetica, sans-serif;}  #myOverlay{position:absolute;top:0;left:0;height:100%;width:100%;}  #myOverlay{display:none;backdrop-filter:blur(4px);background:black;opacity:.4;z-index:2;}    #loadingGIF{position:absolute;top:10%;left:35%;z-index:3;display:none;}    button{margin:5px 30px;padding:10px 20px;}

<div id="myOverlay"></div>  <div id="loadingGIF"><img src="http://placekitten.com/150/80" /></div>    <div id="abunchoftext">  Once upon a midnight dreary, while I pondered weak and weary, over many a quaint and curious routine of forgotten code... While I nodded, nearly napping, suddenly there came a tapping... as of someone gently rapping - rapping at my office door. 'Tis the team leader, I muttered, tapping at my office door - only this and nothing more. Ah, distinctly I remember it was in the bleak December and each separate React print-out lay there crumpled on the floor. Eagerly I wished the morrow; vainly I had sought to borrow from Stack-O surcease from sorrow - sorrow for my routine's core. For the brilliant but unworking code my angels seem to just ignore. I'll be tweaking code... forevermore! - <a href="http://www.online-literature.com/poe/335/" target="_blank">Apologies To Poe</a></div>  <button id="button">Submit</button>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Update:

You might enjoy playing with the new backdrop-filter:blur(_px) css property that gives a blur effect to the underlying content, as used in above demo... (As of April 2020: works in Chrome, Edge, Safari, Android, but not yet in Firefox)

References:

http://www.paulirish.com/2007/animated-gif-not-animating/

Animated GIF while loading page does not animate

https://wordpress.org/support/topic/animated-gif-not-working

http://forums.mozillazine.org/viewtopic.php?p=987829