Display Loading During Page Loads using jQuery and CSS

Display Loading Image During Page Load
Display Loading Image During Page Load
Display Loading Image During Page Load

Website Opening times depends on the element and page size, if your page is large then the website will take more time to load, During page load nothing will be shown on page so today

In This article we will learn How to show loading image during page load.

<div class="myloader"></div>

Add the following HTML element after the <body> opening tag. This my loader div will show a loading image on page load.

CSS

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

JavaScript

Add these files in your page head section.

<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>

Leave a Reply

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