Loading Spinner

[lefreak]

Hi Guys,

I would like to implement a loading spinner when a button is clicked and a function is called to run a script in the background, just not sure how to do it. If possible I would like to keep it a simple css spinner if possible.

My code looks like
 

                             <div class="col-md-12 text-center" id="sync">
                              <button type="button" class="btn btn-primary" onclick="loadDoc()">Click here to synchronise</br>live stock quantities</button>
                             </div>

                            </div>
                           </div>
                           <script>
						   function loadDoc() {
						     var xhttp = new XMLHttpRequest();
						     xhttp.onreadystatechange = function() {
						       if (this.readyState == 4 && this.status == 200) {
						         document.getElementById("sync").innerHTML =
						         this.responseText;
						       }
						     };
						     xhttp.open("GET", "sync.php", true);
						     xhttp.send();
						   }
						   </script>

I would like to use the following css to load the spinner and hide the button if possible

<div class="loader">Loading...</div>

and the css

.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(128,128,255, 0.2);
  border-right: 1.1em solid rgba(128,128,255, 0.2);
  border-bottom: 1.1em solid rgba(128,128,255, 0.2);
  border-left: 1.1em solid #8080ff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Any help would be appreciated.

[requinix]

Put the spinner in the place where the content is going to go, initially hidden, then unhide it when the button is clicked.