Display Loading Image While Page Loads using Jquery and CSS

In this tutorial I’ll show you how can you set an animated loading image while page loads using Jquery and CSS. It is a great idea to show a cool animated image until your website is loading, it will improve your site’s user experience.

A web page load time depends on the page elements and it may be longer if your web page uses lot’s of images. Sometimes well-designed pages suffer for page load time. There are many ways to optimize your web pages to load faster.



With the help of jQuery and CSS, you can easily display a loading image until the page loads completely. Below is the simple code snippet will help you to integrate this feature on your website.
display-loading-image-while-page-loads-using-jquery-and-css
Step-1: Include jquery on your web page.

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

Step-2: Create preloading class class in css to adjust animated image while page loading.

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

Step-3: Add the following HTML after the opening tag. This preloader div will show a loading image on page load.

<div class="preloader"></div>

Step-4: Add jquery animation on page to make it actionable.

$(window).load(function() {
	$(".preloader").fadeOut("slow");
})




Here is the sample script

index.html

<html>
<title>Display Loading Image While Page Loads using Jquery and CSS</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
	$(".preloader").fadeOut("slow");
})
</script>
<style>
.preloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('loader.gif') 50% 50% no-repeat rgb(249,249,249);
    opacity: .8;
}
</style>
</head>
<body>
<div class="preloader">
</div>
<div>
<h2>
<b>What is Lorem Ipsum?</b><br/>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</h2>
</div>
</body>
</html>

DEMO

DOWNLOAD

If you like this post please don’t forget to subscribe my public notebook for more useful stuff