How to Add a Preloader to Your WordPress Site Without a Plugin

In the fast-paced world of the internet, website loading speed is crucial for retaining visitors and improving user experience. One way to enhance this experience is by adding a preloader to your WordPress site. A preloader is a simple animation or graphic that displays while your site is loading, giving the user visual feedback that the site is working. In this tutorial, we’ll walk you through the process of adding a preloader to your WordPress website without the use of plugins.

Why Add a Preloader in wordpress?

Enhanced User Experience:

Preloaders provide visual feedback to users that the website is loading. This can help reduce bounce rates and keep visitors engaged.

Professional Appearance:

A well-designed preloader can enhance the overall aesthetics of your website, making it more visually appealing.

Loading Time Perception:

Preloaders can create the illusion that your site is loading faster, even if load times are not particularly speedy

Add a preloader in your wordpress website

Step 1. Find an animated loader icon

In the world of web design, animated loader icons play a vital role in enhancing user experience and making your website more visually appealing. These icons are not only functional but also a creative way to engage your site’s visitors while content loads.

Step 2. Upload your icon in media library

The next step is to upload your jpeg, png, SVG or GIF file to your wordpress media library and copy the url of your preloader file

Step 3: Copy the following snippet code for functions.php

The next and final step to add preloader in wordpress is to copy this code and paste this in function.php file of your theme.

Note: Dont forget to change your File URL from the code :

add_action( 'init', 'Redpishi_Preloader' );
function Redpishi_Preloader() { if(!is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php" ) { 
	
$delay = 1;	//seconds
$loader = 'https://www.example.com/wp-content/uploads/2023/07/preloader.gif';
$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>
'; }}

Finally, thoroughly test your website to ensure that the preloader works as expected. You may need to make adjustments to the CSS and JavaScript to fit your specific needs. Test your site on different devices and browsers to ensure compatibility.

Adding a preloader to your WordPress site without a plugin is a straightforward process that can significantly improve user experience and make your site look more professional. By following these steps and customizing the preloader to match your site’s style, you can create a visually appealing loading experience for your visitors.