Issue with CSS loading screens

I'm facing an issue where the loading animation I want to display after a user action is appearing greyed out along with the background, when I only want the background to be greyed out. The white box should be opaque but is displaying some transparency as well. Can anyone assist with this problem?

$('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;
}
... (additional CSS code)

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    ... (more keyframes)
}

<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>
... (additional HTML code)

For a better view, check out the full page.

htmlcss

Answer №1

Utilize a RGB background using 

background-color: rgba(0, 0, 0, 0.65);
to incorporate opacity.

By including opacity, it will be inherited by the children elements as well.

Check out the demonstration - http://jsfiddle.net/kw7302rb/

.shader {
    width: 100%;
    height: 100%;
    background-color: black; /** update to: 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;
}

Another possible solution is to add an extra div with opacity.

HTML:

<div id="shader" class="shader">
    <div class="overlay"></div>  <!-- New div added for grayed background effect -->
    <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 link - http://jsfiddle.net/kw7302rb/3/

Answer №2

<-------------------------[ Entire background has a muted grey overlay ]---------------------------->

Make sure to include the CSS property background-color: transparent; for #divLoading3.

Check out this working example on 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 backdrop subtly visible ]----------------------->

To achieve this effect, switch from background-color: transparent; to background-color: #222;

View and interact with the demonstration here on Fiddle

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


$('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 issue arises when the loadingContainer is nested within the fading div. To resolve this, create a separate shaderBg div as shown below:

<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>

Watch it in action here:

http://jsfiddle.net/UniqueUser/abc123/

$('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>

<div id="shader" class="shader">
    <div class="shaderBg">&nbsp;</div>
  <div class="loadingContainer"gt;
    <div id="divLoading4">
      <div id="spinner-wrappers">
        <div id="spinner representation"></div>
      </div>
    </div>
  </div>
</div>

Answer №4

My experience has been positive so far, although the only aspect resembling your query is that I noticed any content behind the loading animation was not grayed out but instead visible in a slightly different shade. Perhaps changing the background of the loading box to a solid color could help rectify this issue.

Answer №5

Try out the following code snippet

#customizeTheme{
    color: #0a0a0a !important;
}

The use of !important allows for overriding a property.

Answer №6

The reason for this issue is that the loading animation is contained within the greyed-out container.

To fix this, simply move the loading animation outside of the container that will be greyed out.

<div class="container">...background content here...</div>
<div class="loading"> ...animation goes here </div>

Check out an example for reference.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the gap between my navigation bar and banner to appear?

Despite setting the margin for my banner and navbar to 0, there is still a space between them. How can I resolve this issue? CSS .body { margin-left: 200px; margin-right: 200px; margin-top: 50px; margin-bottom: 100px; } #page { width: 1000px; margin-lef ...

htmlcss

HTML - The button does not contain any text within it

Hi there! I'm a newbie around here, and I have a question about a particular issue. I noticed that the text appears to be located outside of the designated box, which looks quite odd. How can I ensure that the text displays within the specified box? ...

htmlcss

Dynamic Design with Pure CSS

I am in the process of creating a flexible layout design. Everything appears to be functioning as intended on FF, Chrome, Safari and IE8 However, I have encountered an issue with IE7. It seems to be related to the floated containers. I have attempted a fe ...

htmlcssfluid-layout

How can CSS3 be used to target the initial or final visible element in a selection?

Looking to style form fieldsets with margins, while removing the margin-top for the first non-hidden fieldset and margin-bottom for the last non-hidden fieldset (any fieldset can be dynamically set as hidden by a script). I attempted the CSS below without ...

htmlcsscss-selectors

Create a modal using only HTML and CSS, no Javascript

Is it possible to create a modal using only HTML and CSS, without any JavaScript? I'm working on a project where I cannot use JavaScript but I still need a modal. <!DOCTYPE html> <html> <title>Minimal Modal Design</title> < ...

htmlcss

hide input type with minimal display

Can someone help me find the less equivalent to this css code snippet? I'm not familiar with less and this code is part of a larger global css file that includes generated code from all less files. input[type="checkbox"] { display: none; } Any a ...

cssless

The timestamp within Javascript setInterval remains static without updates

Recently, I've been experimenting with using setInterval in my Javascript code. As a quick test, I attempted to create a live updating clock display. var tim = new Date(); function loadLog(){ document.getElementById('timebox').innerHTML ...

javascripthtmlvariablessetintervalupdates

What are the steps to design a curved trapezoid using CSS?

Is it possible to achieve this using CSS? This is the current progress I've made: div { -webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%); clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%); background:red; height:300px; ...

cssshapes

Allow the select option to be clicked, while preventing it from automatically filling the select input field in reactstrap's Input component

I have a select with an option called "+ Create new" When the user clicks on this option, I am displaying a modal to create a new option. However, I do not want this select option to show "+ Create new" after it is clicked. How can I make the o ...

javascripthtmlcssreactjs

Adjust the translateZ value according to the dynamic height of the element

A unique rotating cube effect has been developed using 3D css transformations. To achieve this, the following transform is applied to a child element: transform: translateY(-50%) translateZ(-75px) rotateX(90deg) ; In addition, the parent element contain ...

csscss-transforms

Attempting to obtain a score value from the input, but unsuccessful in doing so

Prior to posing this question, I had already managed to successfully retrieve the score value. Below is my original script: <script> $.ajax({ type: "POST", url: "https://example.com/paylist.php?acc=useraccount&json=1", ...

javascriptjqueryhtml

Executing the same operation when multiple selections are made from a dropdown menu using jQuery

My dilemma involves a dropdown list featuring options A, B, C, D. I need to implement a functionality where certain input fields are hidden based on the user's selection from the dropdown. I have managed to successfully hide fields when the user sele ...

jqueryhtml

Eliminate :hover effects from the :after elements' content

I am trying to eliminate the hover effect from the content inserted using the css selector :after. Below is my code where I want to remove the underline hover effect from > HTML <ul class="path_string_ul"> <li>Home</li> <l ...

htmlcss

Attempting to achieve horizontal alignment using flexbox

I have been attempting to create 2 menu bars, but I am facing difficulty aligning the menu buttons horizontally due to the uneven number of elements. I have tried various properties such as max-width, flex-basis, flex-grow, and flex-shrink, but I have not ...

htmlcssflexboxresponsive

Ensure that the body content is completely transparent upon loading the page, except for a specific div within the content that remains

Currently, I am experimenting with JQuery and my goal is to have the body content of a webpage appear transparent upon loading, with the exception of one specific div that should remain opaque. So far, this is what I've accomplished ... <!DOCTYPE ...

jqueryhtmlcss

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

javascripthtmlcssapache.htaccess

Conversation taking place outside of an iframe

Having a slight issue with a JavaScript dialog. There's a button and a dialog inside an iframe with the following code: $( "#correcto" ).dialog({ width: 600, closeOnEscape: true, autoOpen: false, draggable: false, modal: true, ...

javascriptjqueryhtmliframe

In Opera, the presence of links is resulting in the displacement of text upwards

Here is the culprit: While working with HTML5 Boilerplate, I encountered an unusual behavior in Opera. When hovering over links, the text appears to move upwards. Strangely, I have not applied any specific a:hover CSS for these links. This issue seems to ...

javascripthtmlcsshtml5boilerplate

Customize the primary color in Bootstrap 4 using SCSS by overriding it based on the base class

I am in the process of developing a multi-site application using a single framework and incorporating Bootstrap 4 with Webpack. My goal is to dynamically adjust certain variables of Bootstrap based on the base class applied to the body element. For exampl ...

csswebpacksassbootstrap-4

Question about the 'form-floating' class inconsistency in Bootstrap version 5.2

Currently utilizing Bootstrap 5.2, I have integrated a form with the following snippet: <div class="row mb-2 align-items-center"> <div class="col-sm-4"> <label class=&qu ...

csswebformsbootstrap-5