How to Create a WordPress Preloader

how to create a wordpress preloader featured image

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.

how to create a wordpress preloader wp smart preloader

  • Go to your WordPress dashboard, then select Add New under the Plugins menu.
  • Search for WP Smart Preloader, then install and activate the plugin.

how to create a wordpress preloader wp smart preloader install

  • 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.

how to create a wordpress preloader wp smart preloader settings

  • 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.

how to create a wordpress preloader manual coding preloader

  • 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>
// preloader css
add_action('wp_head', 'css_preloader');
function css_preloader() {
.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);
// preloader js
add_action('wp_footer', 'js_preloader');
function js_preloader() {
$(document).ready(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');

Leave a Comment

Scroll to Top