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.

Are you want to get implementation help, or modify or enhance the functionality of this script? Click Here to Submit Service Request

If you have any questions about this script, submit it to our QA community - Ask Question

4 Comments

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

Leave a reply

keyboard_double_arrow_up