Preloaders (also known as loaders) are what you see on the screen while the rest of the page’s content is still loading. Preloaders are often animations that are used to keep visitors entertained while server operations finish processing.
In this article, we will teach you how to add a Preloader in WordPress without a plugin.

Wordpress preloader sample 1
Wordpress preloader sample 3
Wordpress preloader sample 2
Download these three preloaders

How to add preloader in WordPress without plugin

Step 1. Find an animated loader icon

Just Google “loader animation” to find hundreds of great resources to download animated preloader. It is better to use files with SVG extension, if you had problem finding SVG files, use GIF instead. SVG files are smaller and load faster.
You can also use the above three animations for your website.
After finding the right animation file, upload it to your site and copy it’s link to use it in the next step.

upload preloader file to WordPress Dashboard

Step 2. Copy the following snippet code in functions.php

In the WordPress dashboard, go to Appearance ➡ Theme File Editor and copy the following code into the theme’s functions.php file and update it.

You must create a child theme before making any changes to functions.php file. Otherwise, the applied changes will be lost after each update.
Create child theme in WordPress step by step [without plugin]

As an alternative method, you can use the Code Snippets plugin to insert your codes into WordPress.

// WordPress Preloader by Redpishi.com

add_action( 'init', 'Redpishi_Preloader' );
function Redpishi_Preloader() { if(!is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php" ) { 
	
$delay = 1;	//seconds
$loader = 'https://redpishi.com/wp-content/uploads/2022/06/preloader3.svg';
$overlayColor = '#ffffff';	
	
echo '<div class="Preloader"><img src="'.$loader.'" alt="" style="height: 150px;"></div>
 <style>
.Preloader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: '.$overlayColor.';
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
</style>
<script>
document.body.style.overflow = "hidden";
document.addEventListener("DOMContentLoaded", () => setTimeout( function() { document.querySelector("div.Preloader").remove(); document.body.style.overflow = "visible"; } , '.$delay.' * 1000));
</script>
'; }}

Customize the above code using the description below:

$delay: The number of seconds you want the loader to be displayed, if you select 0, the loader display will end as soon as the page is fully loaded.
$loader: Put your loader link here.
$overlayColor: color of overlay background in Hex, it can be transparent or opaque.

Congratulation, After making changes and saving the functions.php, your site’s preloader is ready.

If this article is difficult for you to read in text, you can watch the video version below.

Finally, we will be happy if you write your comments and questions in the comments section.

Share this post
Maya
Maya

Hi, my name is Maya and I’m a WordPress plugin developer. I created this website to share some of the helpful codes that I’ve used in my own projects.
If you’re looking for a custom plugin for your website, you can contact me by clicking on Hire a developer in the menu. I’d love to hear from you.

Articles: 50

4 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *