How to add preloader in WordPress website without plugin

Are you looking for a simple method for adding a preloader to your WordPress website? Then don’t worry because here we are going to discuss how to add a loading screen on the website. Preloader can enhance the user experience by displaying a loading animation while the website’s content loads in the background. While there are lots of plugins available to complete this task, you can also implement a preloader without using the plugins. In this article, we will see a simple process to add a preloader to your WordPress website, ensuring a seamless loading experience for your visitors.

Sometimes a preloader, also known as a loading screen or spinner, is a visual element that appears on a web page while its content is being loaded. It helps alleviate the perception of slow loading by providing visitors with a visual cue that the site is still processing their request. By implementing a preloader, you can improve user engagement and reduce bounce rates, ultimately enhancing the overall user experience of your WordPress website.

Add a custom preloader for website

For adding a custom preloader on your website just follow the below simple steps:

1. First log in to your WordPress dashboard.
2. Then Go to Appearance and click on the ‘Them File Editor’.
3. After that select the activated theme
4. Then open the ‘function.php’ file.
5. Then go to the bottom of the source code and paste the given source code.

(Please download the source code here.)

Download

If the download link does not work then copy-paste below source code

// Add Preloader in WordPress

add_action( 'init', 'Allprocoding_Preloader' );

function Allprocoding_Preloader() { if(!is_admin() &&  $GLOBALS["pagenow"] !== "wp-login.php" ) { 

$delay = 1; //seconds

$loader = 'http://allprocoding2.epizy.com/wp-content/uploads/2023/05/Blocks-1s-200px-1.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>

'; }}

If you want to watch this process in the video format then you can also play a given video. Adding a preloader to a WordPress website without using a plugin, process involves modifying the site's theme files directly. First, ensure you have a child theme set up, as making changes to the parent theme directly can lead to complications during future updates. Once you have a child theme ready, you can proceed with the necessary modifications to include a preloader.

Selecting a preloader for your WordPress website can significantly increase the user experience by providing a visual indication of content loading. Most of the time the plugins offer a convenient way to implement preloader functionality but the manual method described in this article allows you to add a preloader without using any type of additional plugins.