Javascript Disable Div and Pop A Loading Icon -

when click button, upload button, want have screen disabled , pop loading icon users have no access forms buttons , , know files being uploaded @ moment.

any ideas on how ? in advance.

a simple idea can have simple div having spinner , div should have 100% height , width

check 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 there" name="button">  </div>

now when want display loader can use jquery

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

this way user have no access of content can see on screen. kind of css tricks.

you can call $("#cssloader").show(); want, can call ajax this.

$.ajax({             url: 'yoururl',             type: 'post',             data: data,             datatype: 'json',             beforesend: function() {                 $('#cssloader').show();             },             complete: function() {                 $('#cssloader').hide();             },             success: function (data) {                       // code             }         });