Coding-Spot

You are not connected. Please login or register

 
 
 

jQuery Loading effects

Message (Page 1 of 1)

avatar
 
Administrator
Administrator

Posted on August 8th 2013, 9: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 August 8th 2013, 10:06 pm; edited 1 time in total



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


avatar
 
Advance Member

Posted on August 8th 2013, 10:03 pm

 
good job i tried in phpbb3 working good

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



View user profile


avatar
 
Administrator
Administrator

Posted on August 8th 2013, 10:05 pm

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



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


avatar
 
Senior Member

Posted on August 8th 2013, 10:40 pm

 
perfectly, work on phpbb2 :D

you rock \m/



View user profile


avatar
 
Administrator
Administrator

Posted on August 9th 2013, 12:03 am

 
Good to hear. Happy 



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


avatar
 
New Member

Posted on September 11th 2013, 10: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


avatar
 
Advance Member

Posted on September 13th 2013, 6:29 pm

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



View user profile


#8

Sponsored content


 

Posted

 





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