CSS loading issue

Question

I am trying to show the loading area after a specific action from the user. I want to show the loading animation in the center of the screen, showing the rest of the page in gray in the background.

At this point, my problem is that the loading animation is also grayed out and I just want to cross out the background. The white box should be opaque, but also a bit transparent. Any help?

$('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; background-color: black; top: 0; bottom: 0; right: 0; left: 0; position: fixed; opacity: 0.5; display: none; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: white; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

Look at the full page for a better view

Answer 1

use the background rgb background-color: rgba(0, 0, 0, 0.65); with opacity

you added opacity so children also inherit it

demo - http://jsfiddle.net/kw7302rb/

 .shader { width: 100%; height: 100%; background-color: black; /** change it to this background-color: rgba(0, 0, 0, 0.65) **/ top: 0; bottom: 0; right: 0; left: 0; position: fixed; opacity: 0.5; /** you can remove this **/ display: none; } 

 $('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); top: 0; bottom: 0; right: 0; left: 0; position: fixed; display: none; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: white; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

or something like that

 $('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.65); top: 0; bottom: 0; right: 0; left: 0; position: fixed; display: none; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.65); } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

another solution - you can add an extra div with opacity

HTML

 <div id="shader" class="shader"> <div class="overlay"></div> <!-- new div added which will act as greyed background --> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

CSS

 .overlay { background-color: black; top: 0; bottom: 0; right: 0; left: 0; opacity:.5; position: fixed; } 

demo - http://jsfiddle.net/kw7302rb/3/

 $('input[type=button]').click(function () { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; top: 0; bottom: 0; right: 0; left: 0; position: fixed; display: none; } .overlay { background-color: black; top: 0; bottom: 0; right: 0; left: 0; opacity:.5; position: fixed; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: white; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="overlay"></div> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

Answer 2

<--------------------------------------- [Entire background greyed out] ---- ---------------------------------------->

Add background-color: transparent; in #divLoading3 to your CSS.

Fiddle

 #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: transparent; } 

 $('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; background-color: black; top: 0; bottom: 0; right: 0; left: 0; position: fixed; opacity: 0.5; display: none; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: transparent; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

---

<------------------------------------- [The image of the loading slide is visible] - ----- ------------------------------->

Replace background-color: transparent; on background-color: #222;

Fiddle

 #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: transparent; } 

 $('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; background-color: black; top: 0; bottom: 0; right: 0; left: 0; position: fixed; opacity: 0.5; display: none; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: #222; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

---

Answer 3

The problem is that your loading container is inside the div that you are freezing. You need a separate shaderBg div, for example:

 <div id="shader" class="shader"> <div class="shaderBg">&nbsp;</div> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

See in action:

http://jsfiddle.net/CaseyRule/uu9Lhmfz/

 $('input[type=button]').click(function() { $("#shader").fadeIn(); }); 

 .loadingContainer { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .shader { width: 100%; height: 100%; top: 0; bottom: 0; right: 0; left: 0; position: fixed; display: none; } .shaderBg { width: 100%; height: 100%; background-color: black; top: 0; bottom: 0; right: 0; left: 0; position: fixed; opacity: 0.5; } #divLoading3 { border-radius: 40px; margin: auto; overflow: hidden; width: 100%; height: 100%; background-color: white; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before { content:""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content:""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } 

 <input type="button" value="load button"> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <p>background contents background contents background contents</p> <div id="shader" class="shader"> <div class="shaderBg">&nbsp;</div> <div class="loadingContainer"> <div id="divLoading3"> <div id="loader-wrapper"> <div id="loader"></div> </div> </div> </div> </div> 

Answer 4

This seems to work fine, but the only thing that seems to be your question was that I saw that everything behind the loading animation was not gray, but visible with a brighter / darker color. I would try to make the background of the boot box solid color,

Answer 5

Use this code

 #divLoading3{ background-color: #060606 !important; } 

WITH! It is important to rewrite the property.

Answer 6

This is due to the fact that your loading animation is inside a container with a gray color.

To solve this problem, you should output the loading animation from the container, which will be grayed out.

 <div class="container">...here the bcakground...</div> <div class="loading"> ... here the animation </div> 

See this example