Create loading layout with loader image using JQuery

Ever wanted to enhance your web pages with smooth loading animations? In this tutorial, we'll explore how to create captivating loading layouts using jQuery. We'll delve into the art of overlaying a loader image over your content, providing a seamless user experience while your page loads.

HTML

Create an invisible block with an image - gif animation.

<div id="LoadingWrap"><img src="/images/load.gif" alt=""></div>

CSS

Create styles for the #LoadingWrap block. The #LoadingWrap block has a full screen size and a transparent image (20%) for the backgroud.

Placing a picture with a gif animation in the middle of the block #LoadingWrap.

#LoadingWrap {
    position:fixed;
    height:100%;
    width:100%;
    overflow:hidden;
    top:0;
    left:0;
    z-index: 10000;
    background: url('/images/bg.png');
    text-align: center;
    display: none;
}

#LoadingWrap img{
    width: 66px;
    height: 66px;
    padding: 0;
    margin: 10% 0;
}

JS

Show/Hide Loading Layout.

$('#LoadingWrap').show();
$('#LoadingWrap').hide();