Archived topic
Pre loader and loading screen problems
3 replies · Started by Toms on September 4, 2019
Hello,
I've ran into some trouble I can't figure out myself. I'm following these two tutorials on applying a pre loader to my website. -
https://ihatetomatoes.net/create-css3-spinning-preloader/
https://ihatetomatoes.net/create-custom-preloading-screen/
I've made it to the end, but something still doesn't quite work. I made a child theme and did all my edits there. I added all the HTML necessary for the spinner at header.php after <head> tag. All the CSS at style.css. But now there's the part to make the spinner spin for 3 seconds and then initiate the loading exit animation. I tried to add that Jquery line (pasted at the end of doc.) to GP hooks section. Tried to hook the line in wp_head, wp_footer, before_footer, but no success. The spinner spins and never initiates the exit animation... So then I tried to add the "loaded" class manually by applying it to header.php "body('loaded')" like this, then the spinner spins for about 0.5 secs and initiates the exit animation... So I can't figure this out on my own, could you please help me?
$(document).ready(function() {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});Hi there,
If you're adding that script to a Hook Element, you can do this:
<script>
jQuery(document).ready(function($) {
setTimeout(function(){
$('body').addClass('loaded');
$('h1').css('color','#222222');
}, 3000);
});
</script>Let me know if that does it or not :)
Hey Tom,
That worked! Thanks a lot!
You're welcome :)
