loading spinner until page loads code example

Example 1: my loader is continously loading js

$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
    $( "#loadingDiv" ).fadeOut(500, function() {
      // fadeOut complete. Remove the loading div
      $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

Example 2: show loading spinner while page loads angularjs

<body ng-app="MyApp" ng-controller="MyCtrl">

  <div>
    <button class="btn" ng-click="load()">Load Tweets</button>
    <img id="spinner" ng-src="img/spinner.gif" style="display:none;">
  </div>

  <div>
    <ul ng-repeat="tweet in tweets">
      <li>
        <img ng-src="{{tweet.profile_image_url}}" alt="">
          {{tweet.from_user}}
        {{tweet.text}}
      </li>
    </ul>
  </div>

</body>

Tags:

Javascript Example

Recent Posts