Add nice loading effects to Generatepress with Pace.js

Home Forums Support Add nice loading effects to Generatepress with Pace.js

Home Forums Support Add nice loading effects to Generatepress with Pace.js

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #195641
    Roberto Enrique

    Have you ever noticed the red loading bar in youtube’s topmost part?
    Well, adding that functionality to your GP powered site is pretty easy with Pace.js
    You just need to add the script and the desired style to your child theme folder (i usually create dedicated folders for /js and /css stuff in my child themes) and then add this to your functions.php

    
    function pacejs_styles_and_scripts() {
    
    	wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-flash.css');
    	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js');
    }
    
    add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );
    

    As you can see in the Pace.js website there are a lot of styles already available, my personal favorite is the flash theme but you can choose another one just replacing/adding the css file in the css folder with the one you like and eventually modifying the wp_enqueue_style in the function accordingly.

    If you feel lazy you can use a ready made child theme that can be downloaded here:
    http://www.artomultiplo.net/extra/gp-pacejs.zip

    You can see a working example here: filippogismondo.artomultiplo.net

    I think it really helps reducing the perceived slowlyness of a website πŸ™‚

    Hope you like it

    #195689
    Tom
    Lead Developer
    Lead Developer

    Oooh, fancy! Thanks Roberto! πŸ™‚

    #196330
    mirthar

    Hi there!

    I was messing around with this code, but I really can’t get it working on my local installation of generate press.

    I tried with a couple of others child themes of mine and seems to work flawlessy in each one of them.

    The result I get with generate press is a violet bar loading at the center of the screen and the regular animation you choose via css. I really don’t get what I am missing…

    Could you please shed some light? πŸ™‚
    (I love this theme soooooooo much, just bought the add-on bundle yesterday)

    #196377
    Mosche

    I personally love playing around with css. And making child themes.
    Especially since Generatepress with its ad-ons makes it so easy.
    However for the less technically savvy. I’d recommend the plugin:

    https://wordpress.org/plugins/brozzme-material-loading/

    It’s interface lets you choose all the options.Line height, color, style etc.
    Much easier for novice users.

    #196386
    mirthar

    Thanks for the info Mosche!
    I really appreciate your answer and I will definitely give it a look.

    However, I still don’t get why I can’t get the effects I want only in generatepress πŸ™‚
    It’s like if the script gets loaded twice. Once with the standard default loading bar in the center and in the meantime the correct animation gets loaded too…

    I tried the same snippet on 4 different child themes without any issue and obtaining exactly the effect I should have

    Can someone help me to point out why?

    #196389
    Roberto Enrique

    Why don’t you share your child?

    #196416
    mirthar

    Of course!
    Thanks for your interest in helping me out πŸ™‚
    Here it is!

    <?php
    /**
     * Generate child theme functions and definitions
     *
     * @package Generate
     */
    function pacejs_styles_and_scripts() {
    	
    	wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-corner-indicator.css');
    	wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js');
    }
    
    add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );

    Here you have link to see it in action:
    https://drive.google.com/open?id=0B90-Gwn3YdBFc3JteVh2ekZSYTQ

    #196549
    Roberto Enrique

    That’s actually really weird.
    Are you using any plugin that could be messing things up?

    #196554
    mirthar

    I deactivated everything, one by one and still no solution about it πŸ™

    The really weird thing, is that this behaviour only happens with generatepress and not with any other theme. When I tried to switch between them all the plugins were active.

    Any other guess?

    Let me thank you all again for your kind interest πŸ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.