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.
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.
Share Improve this question edited Dec 15, 2015 at 5:30 Mark Kaplun 23.8k7 gold badges43 silver badges65 bronze badges asked Dec 14, 2015 at 16:35 Snazzy SanojSnazzy Sanoj 1971 silver badge9 bronze badges 4- 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 ♦ Commented Dec 14, 2015 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 Commented Dec 15, 2015 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 ♦ Commented Dec 15, 2015 at 16:23
- I was just trying to add a preloader to my WordPress site with CSS animation(by any means). :) – Snazzy Sanoj Commented Dec 15, 2015 at 16:40
1 Answer
Reset to default 4You 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
});