Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show loading icon while page is loading

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 378
    Comment on it

    Hello Reader's, If your webpage is taking too long to take data from database and you want to fix a loading icon for the time then you can use the following Javascript based code for that:-

    First Step:- Write the following code just after you <body> tag

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

    And in the bottom add the js code as follows:-

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

    Last you just have to put some CSS :-

    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: