Show loading image on page load

Use Simple Jquery function Show loading image on page load, hide the content of the page while loading and display an animated loading gif image until the page loads using javascript and css

Load Jquery lastest version

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Add script code to website:

<script>// <![CDATA[
$(window).load(function() { $(".loader").fadeOut("slow"); });
// ]]></script>

HTML code after <body> tag

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

Css for loading images

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

Some loading images: Click here to download Loading Images

Share this :

Comments are closed.

Related post

Free Responsive Website templates

ThemeVina is Best site for free sharing and download Wordpress themes, Joomla templates, Responsive website templates and more HTML templates.

All template in Site are free. You can download and install for your site.

Contact us

  • Brand: Theme Vina
  • Email: admin@themevina.com
  • Website: www.themevina.com
  • Address: 367 Tran Hung Dao Street
  • Location: Thai Binh City, Thai Binh, Viet Nam

Newsletter