jQuery loading

by M Shameer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="loading" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

<div id="content">
  All the content is here
</div>

CSS

#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin:-100px 0 0 -100px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#content{ display: none; }

JavaScript

//Regular Javascript
setTimeout(function() {
  document.getElementById("content").style.display = "block";
  document.getElementById("loading").style.display = "none";
}, 1000);


//Jquery
/*
setTimeout(function() {
  $("#content").show(1000);
  $("#loading").hide(1000);
}, 4000);
*/