jquery loading animation

Sunday , 11, April 2021 Leave a comment

Heavy websites take time to load and this can be boring for users to this website. It is better to let the user know that the website is loading . There are many ways to do this but in this tutorial, I will learn you how to show a simple loading animation image in your website at the entrance of the page. Once the page is loaded, this animation will fadeOut after the fully loaded website.


but CSS3 and jQuery can load animations, but not all of them work in the older browsers.

CSS Part

First of all you have to download the loading animation image according to your own choice ‍and setup in background:url image path. and you can change loading image size from background-size

  <style>
    #loader{
      z-index:999999;
      display:block;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:url(loding-img.gif) 50% 50% no-repeat #cccccc;
      background-size: 200px 200px;
      }
  </style>

JS part

Then, just before you close your head tag, add the following line of code to apply jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $(window).load(function(){
          $("#loader").fadeOut("slow");
        });
    });
    </script

html part

The HTML part for this tutorial is not much. just add  id “loader” in div tag

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #loader{
      z-index:999999;
      display:block;
      position:fixed;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background:url(loding-img.gif) 50% 50% no-repeat #cccccc;
      background-size: 200px 200px;
      }
  </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
        $(window).load(function(){
          $("#loader").fadeOut("slow");
        });
    });
    </script>
</head>
<body>
  <div id="loader">
  </div>
</body>
</html>
Dynamic dependent select box using jQuery, Ajax, and PHP
Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *