Shutter Page Loading effect with Jquery and CSS

Leave a Comment
Shutter Door like Effect

Every web developer wants his website/blog to look beautiful and attractive. Loading Effect add effects to web page when page start load or when visitors leave a page. These gives shutter opening effect when site/page gets fully loaded.

CSS for Shutter Loading Effect

#sle{
position:fixed !important;
top:0;
right:0;
bottom:0;
left:0;
z-index: 9999;
background:#000 url('Loading Image URL') no-repeat 50% 30%;
color:#FFF;
display:none;
font:0/0;
text-shadow:none;
padding:1em 1.2em;
opacity:0.5;
}

Put this CSS in your CSS File or Style tag. Here Opacity makes #sle layer 50% transparent to make effect better.

Jquery for Shutter Loading Effect

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="sle">Loading...</div>');
$(window).on( "load", function() {
// ... Show the Animation `.fadeIn()`
$('#sle').fadeIn(1000).delay(6000).slideUp(1000);
});
//]]>
</script>


Put this script code just after <body>. This Code is compatible with Google Chrome, Mozilla Firefox, Safari and Internet Explorer 8+.
* Note - Replace 'Your Loading Image URL' with with image url you use for Loading.

About Author: Divy Singh Rathore

I am Founder of Codoat and live in Indore, India.
I am doing Engineering in Computer Science and like to do programming & designing.
Proud to be an Indian


0 comments:

Post a Comment

Please Note :- We have Zero Tolerance to Spam comments.

© 2015 Codoat - Codes for You All Rights Reserved. | Sitemap | Terms & Condition | Privacy Policy