jQuery Page Load Effects without percentage animation

In this tutorial I will explain you how to Loading page with JQuery animation effect without progress bar. Also need to load jquery.min.js file and a gif image. After the page is getting load, when you click the link button an animation loading popup will show on the page.

Source Code:

<style type="text/css">
    a,img {
        border:0;
    }
 
    .demo{
        margin:100px auto 0 auto;
        width:400px;
        text-align:center;
        font-size:18px;
    }
 
        .demo .action {
            color:#3366cc;
            text-decoration:none;
            font-family:Arial;
        }
 
    .overlay{
        position:fixed;
        top:0;
        right:0;
        bottom:0;
        left:0;
        z-index:998;
        width:100%;
        height:100%;
        _padding:0 20px 0 0;
        background:#f6f4f5;
        display:none;
    }
 
    .showbox{
        position:fixed;
        top:0;
        left:50%;
        z-index:9999;
        opacity:0;
        filter:alpha(opacity=0);
        margin-left:-80px;
    }
 
    .showbox,.overlay {
        position:absolute;
        top:expression(eval(document.documentElement.scrollTop));
    }
 
    #AjaxLoading{
        border:1px solid #8CBEDA;
        color:#37a;
        font-size:12px;
        font-weight:bold;
    }
 
        #AjaxLoading div.loadingWord {
            width:180px;
            height:50px;
            line-height:50px;
            border:2px solid #D6E7F2;
            background:#fff;
        }
 
        #AjaxLoading img {
            margin:10px 15px;
            float:left;
            display:inline;
        }
 
    .wx-pip{
        display:flex;
        justify-content:center;
        align-items:center;
        height:125px;
        margin-bottom:10px;
    }
        /* line 15, ../scss/main.scss */
        .wx-pip span {
            width:100%;
            height:100%;
            border:1px solid #eee;
            background:#fff;
            background-image:url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy-preview.gif);
            background-color:#fff;
            background-repeat:no-repeat;
            background-position:center;
            background-size:50px 50px;
        }
</style>
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 
<script type="text/javascript">
    $(document).ready(function() {

        varh = $(document).height();
        $(".overlay").css({"height": h });
 
        $(".action").click(function() {
 
            $(".overlay").css({'display': 'block','opacity': '0.8'});
 
            $(".showbox").stop(true).animate({'margin-top': '300px', 'opacity': '1' }, 200);
 
        });
 
    });
</script>


<div class="demo">

    <a class="action" href="javascript:void(0);">jquery Page Load Effects </a></ div>

    <div class="overlay"></div>

    <div id="AjaxLoading" class="showbox">

        <div class="loadingWord"><img class="wx-pip" src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy-preview.gif">            Loading, please wait...</div>

    </div>
 

</div>