2

I found a CSS animation snippet on Codepen, and would like to add it in my WordPress site for preloader animation, but I couldn't find any related help or plugin that would allow me to add a Preloader with custom CSS animation.

I tried googling, but all I could find was plugins that accepts "GIF animation" for preloader animation. But, I want to use "CSS animation" instead of "GIF animation".

Any suggestions?

P.S. I only have a moderate knowledge of WordPress.

  • The linked codepen is just an animation, building a pre-loader would be a javascript/frontend task, not one specifically for WordPress. Do you mean to ask how to load javascript or stylesheets from your theme? Or place them inline? – Tom J Nowell Dec 14 '15 at 19:18
  • No, All I could find on internet is the plugins which accepts "GIF animation" for preloaders, but I would like to use "CSS animation". – Snazzy Sanoj Dec 15 '15 at 4:11
  • Plugin recommendations are off topic here, but you can ask how to build this ( rather than what to install ), can you be more specific about which parts you're unclear about? Are you asking how to implement a preloader? Do you know how but don't know how to load it in WordPress? Your questions ambiguous – Tom J Nowell Dec 15 '15 at 16:23
  • I was just trying to add a preloader to my WordPress site with CSS animation(by any means). :) – Snazzy Sanoj Dec 15 '15 at 16:40
4

You can accomplish this by setting a class on the body and removing it with JS when the page is loaded. This is just a basic example but it'll work out of the box.

 // Add specific CSS class by filter
add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
    // add 'class-name' to the $classes array
    $classes[] = 'preloader-visible';
    // return the $classes array
    return $classes;
}

// Add preloader style
add_action('wp_head', function(){ ?>
  <style>
    /** let's every child  of body know there is a loader visible */
    body.preloader-visible {
      background:red;
    }

    /** by default loader is hidden */
    body > .loader {
       display:none;
    }

    /** when loader is active the loader will show */
    body.preloader-visible > .loader {
       display:block;
    }
  </style>
  <?php
});

// Remove preloader when document is ready
add_action('wp_footer', function(){ ?>
  <script>
    (function($){

      $(function () {

          $('body').removeClass('preloader-visible');

      });

    })(jQuery);
  </script>
  <?php
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.