Javascript Disable Div and Pop A Loading Icon

Question

When you click a button, an upload button, I want to have my screen disabled and pop up a loading icon so that the users will have no access to the forms buttons and everything and they will know that their files are being uploaded at the moment.

Any ideas on how to do it ? Thanks in advance.

Try to google your question? [link1](http://stackoverflow.com/questions/9416556/jquery-how-to-disable-the-entire-page) [link2](http://stackoverflow.com/questions/10477267/how-can-i-disable-an-entire-html-page-on-an-event-like-in-the-case-of-javascript) etc.... — Rick Bronger, Apr 14 '17 at 11:46
been there. googling all day and nothing worked for me. so please. help me. — Cereal Killer, Apr 14 '17 at 11:50
may be [this](http://stackoverflow.com/questions/10477267/how-can-i-disable-an-entire-html-page-on-an-event-like-in-the-case-of-javascript) can help you. — Punit Gajjar, Apr 14 '17 at 12:18

Punit Gajjar · Answer 1 · 2017-04-14T12:02:31.290

A simple idea is like You can have a simple div having some spinner , Div should have the 100% height and width

check my snippet.

.spinftw {
                border-radius: 100%;
                display: inline-block;
                height: 30px;
                width: 30px;
                top: 50%;
                position: absolute;
                -webkit-animation: loader infinite 2s;
                -moz-animation: loader infinite 2s;
                animation: loader infinite 2s;
                box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                background-size: contain;
                
            }

            @-webkit-keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            @-moz-keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            @keyframes loader {
                0%,
                100% {
                    box-shadow: 25px 25px #3498db, -25px 25px #c0392b, -25px -25px #f1c40f, 25px -25px #27ae60;
                }
                25% {
                    box-shadow: -25px 25px #3498db, -25px -25px #c0392b, 25px -25px #f1c40f, 25px 25px #27ae60;
                }
                50% {
                    box-shadow: -25px -25px #3498db, 25px -25px #c0392b, 25px 25px #f1c40f, -25px 25px #27ae60;
                }
                75% {
                    box-shadow: 25px -25px #3498db, 25px 25px #c0392b, -25px 25px #f1c40f, -25px -25px #27ae60;
                }
            }

            body {
                /*padding: 80px 0;*/
            }
            #CssLoader
            {
                
                text-align: center;
                height: 100%;
                width: 100%;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                background: rgba(255,255,255 , 0.9);
                z-index: 9999;
            }

<div id="CssLoader">
            <div class='spinftw'></div>
        </div>

<div>
<input type="button" value="YOu cant click me till loader is there" name="button">
</div>

Now when you want to display this loader you can simply use the jquery like

$("#CssLoader").show();

This way user will have even no access to any of the content he can see on the screen. This is just a kind of CSS tricks.

you can call this $("#CssLoader").show(); any where you want, like you can also call it with ajax like this.

$.ajax({
            url: 'yourURL',
            type: 'POST',
            data: data,
            dataType: 'JSON',
            beforeSend: function() {
                $('#CssLoader').show();
            },
            complete: function() {
                $('#CssLoader').hide();
            },
            success: function (data) { 
                     // code
            }
        });

100% height and width of the loader will not allow user to access whatever in the content, — Punit Gajjar, Apr 14 '17 at 11:53
exactly. . . . ...... these are just a CSS tricks , nothing else . banefit is you can call this anytime anywhere you want, even you can use this until your page completely loaded, you just need to hide it on DOM ready. — Punit Gajjar, Apr 14 '17 at 12:03

loelsonk · Accepted Answer · 2017-04-14T12:10:38.713

Our code works as follows:

simple validation - if user doesn't enter the data, form won't submit
if we enter the data and submit then overlay shows up. User can't click on form elements - higher z-index
Button changes its state - we change input value from 'Send' to 'Processing'
after we are done with our request, form resets to its original state

Check working example. Read my comments to have better understanding.

var ourForm = document.getElementById('form');
var formElements = ourForm.children;
var formOverlay = document.querySelector('.form-overlay')

function formSubmit() {

  // simple validation
  for (var i = 0; i < formElements.length; i++) {
    var formElement = formElements[i];
    
    if (formElement.type === 'submit') {
      var ourSubmitInput = formElement;
    }
    
    if (formElement.type === 'text' && formElement.value.length  === 0) {
      alert('Enter anything'); // our error alert
      return false; // exit form if validation is not passed
    }
  }
  
  // lets add overlay to our form
  formOverlay.style.display = 'block';
  
  // and lets change the value of submit Input/Button
  ourSubmitInput.value = 'processing...';

  // Here is our form ajax/xhr request...
  // code...
  

  // Lets pretend we are finishing xhr request after 1.5s
  setTimeout(function() {
    // back to previous state
    formOverlay.style.display = 'none';
    ourSubmitInput.value = 'Send'; 
    //reset our form
    ourForm.reset();
  }, 1500);
  
  


// prevent form from auto submitting
return false;
}

.form-container {
  padding: 20px;
  background: #ccc;
}
#form {
  padding: 40px;
  border: 1px solid black;
  position: relative; 
}

.form-overlay {
  display: none;
  position: absolute;
  width: 100%; 
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,.5);
  z-index: 1;
}

<div class="form-container">
  <form id="form" onSubmit="return formSubmit();">
      <div class="form-overlay"></div>

      <h2>Our Form</h2>
      <input type="text" placeholder="type something so we can begin" />
      <input type="submit" value="Send" />

  </form>
</div>

score 0 · Answer 3 · answered Apr 16 '17 at 09:17

I found an answer. Finally.

#loadp{
 background: #000;
 height: 100%;
 width: 100%;
}

#load {
 position:absolute;
 width:600px;
 height:36px;
 left:50%;
 top:40%;
 margin-left:-300px;
 overflow:visible;
 user-select:none;
 cursor:default;
}

#load div {
 position:absolute;
 width:20px;
 height:36px;
 opacity:0;
 font-family:Helvetica, Arial, sans-serif;
 animation:move 2s linear infinite;
 transform:rotate(180deg);
 color:#35C4F0;
}

#load div:nth-child(2) { animation-delay:0.2s; }
#load div:nth-child(3) { animation-delay:0.4s; }
#load div:nth-child(4) { animation-delay:0.6s; }
#load div:nth-child(5) { animation-delay:0.8s; }
#load div:nth-child(6) { animation-delay:1s; }
#load div:nth-child(7) { animation-delay:1.2s; }

@keyframes move {
 0% {
  left:0;
  opacity:0;
 }
 35% {
  left: 41%; 
  transform:rotate(0deg);
  opacity:1;
 }
 65% {
  left:59%; 
  transform:rotate(0deg); 
  opacity:1;
 }
 100% {
  left:100%; 
  transform:rotate(-180deg);
  opacity:0;
 }
}

 <link href = "css/load.css" rel = "stylesheet" type="text/css"/>
 <script>
  $(document).ready(function(){
   $("#loadp").hide();
   $("#upload").click(function(){
    $(".cgnz").hide();
    $("#loadp").show();
   })
  });
 </script>
<div class = "cgnz">
//code here
</div>
 <div id = "loadp">
  <div id="load">
    <div>G</div>
    <div>N</div>
    <div>I</div>
    <div>D</div>
    <div>A</div>
    <div>O</div>
    <div>L</div>
  </div>
 </div>

Thanks to those who answered

Javascript Disable Div and Pop A Loading Icon

3 Answers3