Display Loading Image While Page Loads using jQuery and CSS

display-loading-image-while-page-loads-jquery-css-codexworld

A web page load time depends on the page elements and it may be longer for lots of images, JavaScript, and CSS. Sometimes well-designed pages suffer for page load time. There are many ways to optimize your web pages to load faster. However, displaying a loading image on page load is a great idea to maintain the user experience of your website.

Using jQuery and CSS, you can easily display a loading icon until the page loads completely. Here we’ll provide a simple way and short code snippets to show a loading image while page loading.

HTML

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

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

CSS

Use the following CSS to display a loading image on loader div, make loading image position center of the page, and cover the entire screen with a transparent white background.

.loader {
    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

At first include the jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Now add the following line of code to hide the loading image while the page loads completely.

<script type="text/javascript">
$(window).load(function() {
    $(".loader").fadeOut("slow");
});
</script>

Also, ensure that the entire JavaScript code has been placed under the <head> tag.

Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request

4 Comments

  1. Arthur Said...
  2. Astrin Said...
  3. Zjuninho Said...
  4. Kuvar Singh Said...

Leave a reply

keyboard_double_arrow_up