user1234 user1234 - 5 months ago 35
CSS Question

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

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.

enter image description here

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 Source

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();
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download