[Resolved] Pre loader and loading screen problems

Home Forums Support Pre loader and loading screen problems

  • This topic has 3 replies, 2 voices, and was last updated 1 year ago by Tom.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1000629
    Toms

    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);
     
    });
    #1001094
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1001530
    Toms

    Hey Tom,

    That worked! Thanks a lot!

    #1001898
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.