Web Design is all about customization. Designer should take care of even small elements. A custom loading animation attract your website’s visitor.

Loading animation is one of the important part of good web – design.

Today we are back with another tutorial, ” How to add loading gif while page is loading? ”

Let’s start…
Firstly for PHP users
It will be very easy to implement for PHP users. It will take just couple of minutes.



Step 1 : Write down following code and save it as ” Loading_anim.php ”

<style>
.loader {<br />
    position: fixed;<br />
    left: 0px;<br />
    top: 0px;<br />
    width: 100%;<br />
    height: 100%;<br />
    z-index: 9999;<br />
    background: url('https://loading.io/spinners/fidget-spinner/lg.fidget-spinner.gif') 50% 50% no-repeat rgb(249,249,249);<br />
    opacity: .8;<br />
}<br />
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>
<div class="loader"></div>

Step 2: all set, now let’s see how to use this.
Wherever or in whichever page you want to add custom loading animation, just add the following line in your code.

<!--?php include("Loading_anim.php"); ?-->

Step 3: To change the gif just foto the Loading_anim.php file and go to line 8 , background : url(“here you can add your gif “);






For non PHP users
Code is same, but need some changes. Still it is easy only
Step 1 : Add following lines to your CSS file.

.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('https://loading.io/spinners/fidget-spinner/lg.fidget-spinner.gif') 50% 50% no-repeat rgb(249,249,249);
opacity: .8;
}

Step 2: Add following lines anywhere in your html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>

Step 3: Now all set, add this line inside the body tag

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

Step 4: To change the gif just goto the your css file file and go to class .Loader and change the following argument , background : url(“here you can add your gif “);


Leave a Reply

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