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;
}
Read :-
Animated Box Shadow
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.
Don't Forgot to Share this Post
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.