Coding-Spot

You are not connected. Please login or register

 
 

jQuery Loading effects

Message (Page 1 of 1)


 
Administrator
Administrator

Posted on Thu Aug 08, 2013 2:52 pm

 
Hello! I am going to provide a code of loading page with effect. When the page is refreshing, a loading image will pop-out, and once the page is loaded, the loading image will disappear by fade.
Forum Version: All version

So let's start! :D

For PunBB and Phpbb2:
1. Go to overall_header template, find the ending head tag (</head>) then paste this before the closing tag:
Code:
<script>
jQuery(window).load(function(){
jQuery('#loading').fadeOut(2000);
});
</script>
2. Inside the same template (overall_header), find the opening body tag. (<body>) then paste this below it:
Code:
<div id="loading"></div>
3. Now add this to your CSS:
Code:
#loading {
background: #000 url(http://i41.tinypic.com/j92cy8.gif) no-repeat center center;
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
z-index: 1000;
border-radius: 5px;
}
For Phpbb3 and Invision:
1. Add this to your Javascript Management: (In all pages)
Code:
jQuery(window).load(function(){
jQuery('#loading').fadeOut(2000);
});
2. Put this inside your Site description: (ACP > General > Forum > Configuration)
Code:
<div id="loading"></div>
3. Now add this to your CSS:
Code:
#loading {
background: #000 url(http://i41.tinypic.com/j92cy8.gif) no-repeat center center;
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
margin: -25px 0 0 -25px;
z-index: 1000;
border-radius: 5px;
}
Enjoy! :D



Last edited by Mark on Thu Aug 08, 2013 3:06 pm; edited 1 time in total



View user profile http://coding-spot.darkbb.com



 
Advance Member

Posted on Thu Aug 08, 2013 3:03 pm

 
good job i tried in phpbb3 working good

coding spot Rocks...........



View user profile



 
Administrator
Administrator

Posted on Thu Aug 08, 2013 3:05 pm

 
Good to hear. Yeah, and will always rock. LOL. Thanks. Tounge 



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Thu Aug 08, 2013 3:40 pm

 
perfectly, work on phpbb2 :D

you rock \m/



View user profile



 
Administrator
Administrator

Posted on Thu Aug 08, 2013 5:03 pm

 
Good to hear. Happy 



View user profile http://coding-spot.darkbb.com



 
New Member

Posted on Wed Sep 11, 2013 3:03 pm

 
E-Mark its Not working for me!
The progress bar thing just Stays on the Screen?
What am i doing Wrong?
I sense removed it but i can re add the codes!
Please help!


I fixed it i had to Change the 2000 in the code to 'Fast'



View user profile



 
Advance Member

Posted on Fri Sep 13, 2013 11:29 am

 
Wow! Working on my Invision forum!!! mark youre great!!!Happy 



View user profile


#8

Sponsored content


 

Posted Today at 11:54 am

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None