Preloader - use preloader in HTML

Preloader using on the website. You'll find it on many websites in Themeforest or TemplateMonster. When user will enter the website, a loader will show (as a circle or as animated image) untill load the full website contents.

Web designer has used peroloader mainly user interface. When you are entering in a website it may not able to download all CSS, Javascript at the right time. It may cause of server down or code issue. Now the template buyer sees the broken website, he will not impress and he will not buy it.

So it's important to use preloader in your website, if there have many Javascript, CSS codes. For showing preloader in your website, please follow the below instructions properly.

You need to use jQuery for using preloader. Add this code before the </body> tag.

jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Place the following JavaScript code right before the </body> tag.

<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>

CSS

Need to use the below CSS code in your template. You can customize the CSS easily.

body {
overflow: hidden;
}
/* Preloader */

#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
/* change if the mask should have another color then white */

z-index: 99;
/* makes sure it stays on top */
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */

top: 50%;
/* centers the loading animation vertically one the screen */

background-image: url(../img/status.gif);
/* path to your loading animation */

background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
/* is width and height divided by two */
}

HTML

Place following HTML Code directly after the <body> tag.

<div id="preloader">
<div id="status"> </div>
</div>

The outer DIV 'preloader' will be called from the CSS file and will cover the entire website with a white DIV. The inner DIV status will show the loading animation. Also, you should not forget to give your document a proper doctype. Otherwise the preloader might not work.

Image

The image status.gif is will be displayed in the DIV status and is located at /img/status.gif. To create loader images you can visit- Ajax Loa d.

Don wl oad the preloader source code

For more Tutorials keep visiting our Blog.

Share it in your Facebook, Twitter, Google Plus wall.

Thanks.

Preloader - use preloader in HTML

একটি মন্তব্য পোস্ট করুন

যোগাযোগ ফর্ম