Blur all but one element in the body

Try This

You can achieve this using css only. NO NEED TO JQUERY

Please see the below code

body > *:not(#loading) {
  filter: blur(3px);
}

<div>Some DIV.</div>
<div id="loading">Loading DIV
    <div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

Unfortunately you cannot blur an HTML node without blurring its children.

One solution is to put your contents and loading image in two divs inside a parent div like the following.

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
    <div id="loading">Spinner...</div>
</div>

To blur/unblur just do $('#background').css('filter', 'blur(3px)).

The problem is that your selector works on all body elements and then picks the ones that do not have ID loading. Since there is only one body element and it indeed does not have this ID, it is selected. Of course, this is not what you want. You want to select all children of the body element and then filter those that do not have the loading ID.

The selector needs to be body > *:not(#loading).

To clarify: this selector selects all elements (*)...
...that are children of the body (body > *)
...and do not have ID loading (*:not(#loading)).

This uses the child selector (spec) and negation pseudo-class :not() (spec).

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}

<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>