6

I'm trying to show a loading area after a certain action from the user. I want to show the loading animation in the center of the screen while showing the rest of the page greyed out, in the background.

At this point, my problem is that the loading animation is greyed out too, and I just want to grey out the background. The white box should be opaque but is a bit transparent too. 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>

See it full page for a better view

chiapa
  • 4,362
  • 11
  • 66
  • 106
  • Very simple fix! You just need a separate div for the background. – Casey Rule Nov 11 '14 at 16:29
  • possible duplicate of [I do not want to inherit the child opacity from the parent in CSS](http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css) – Rohith Nov 12 '14 at 10:13

6 Answers6

4

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

you have added opacity so the children's will 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 this

$('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 would be you can add a 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>
Vitorino fernandes
  • 15,794
  • 3
  • 20
  • 39
3

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

Add background-color: transparent; to #divLoading3 in 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>

<-------------------------------------[ Loader's background slighly visible ]-------------------------------------->

Replace background-color: transparent; with 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>
Weafs.py
  • 22,731
  • 9
  • 56
  • 78
2

The problem is that your loadingContainer is inside the div that you are fading. You need a separate shaderBg div, like this:

<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 it 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>
Casey Rule
  • 2,085
  • 2
  • 18
  • 28
1

It seems to work fine for me, but only thing similar to your question was that I saw anything that was behind the loading animation was not gray, but visible with a brighter/darker color. I'd try making the background of the loading box be a solid color,

The Gaming Hideout
  • 34
  • 10
0

Use this code

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

With !important you can rewrite a property.

ppascualv
  • 1,137
  • 7
  • 21
0

That happens because your loading animation is inside the container that is greyed out.

To solve it, you should put the loading animation out of the container that is going to be greyed out.

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

Look at this example

Giovanni Bitliner
  • 2,032
  • 5
  • 31
  • 50