A WordPress preloader is required if your website has video or image content. A preloader displays a “loading” image, which is frequently animated, and informs the visitor that there’s upcoming content.
A website preloader is especially useful if your content is likely to be slow to load over some connections. Without some kind of visual cue, a visitor may be confronted with a blank spot where your media should be, leading them to feel there is a mistake. A preloader informs them that something is on its way.
WordPress Preloader Using a Plugin
If you are new to WordPress and don’t know how to code that much. You can use a plugin since it is much easier. For this example, we are going to use the WP Smart Preloader since it has good reviews and a high download rate on the plugin page.
- Go to your WordPress dashboard, then select Add New under the Plugins menu.
- Search for WP Smart Preloader, then install and activate the plugin.
- To open the plugin, go to Settings, then WP Smart Preloader.
- Once you are in the WP Smart Preloader, you can select what type of preloader style.
- You can also set it as “Show only on Home Page”.
- You may be able to set the delay of the WordPress Preloader.
- Customization is also available. You can HTML 5 and CSS script below.
- After all the settings, you just click Save Changes.
Manual Preload
- If you want to explore and knows how to code, this option is good for you.
- Create a staging site first for testing.
- Go to Appearance > Theme Editor > Functions.php.
- Paste this code below and click Update File.
// preloader body
add_action( 'wp_body_open', 'body_preloader' );
function body_preloader() {
?>
<div class="spinner-wrapper">
<div class="spinner"></div>
</div>
<?php
}
// preloader css
add_action('wp_head', 'css_preloader');
function css_preloader() {
?>
<style>
.spinner {
position: absolute;
top: 48%;
left: 48%;
width: 50px;
height: 40px;
text-align: center;
font-size: 10px;
}
.spinner > div {
background-color: #333;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
</style>
<?php
}
// preloader js
add_action('wp_footer', 'js_preloader');
function js_preloader() {
?>
<script>
$(document).ready(function() {
//Preloader
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
<?php