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 *

Related Posts

Android

Google firebase have introduced a new product for developers

Often google brings up the cool and get tools for developers which really helps developers in various field. If you are familiar with firebase of google then there is a new awesome tool for you Read more…