Add an Advanced Preloader to WordPress • FarrosFR

DISCLAIMER

This tutorial is intended for intermediate to advanced users who are familiar with the WordPress file structure and the use of cPanel/FTP. The steps described below involve modifying core files and directory structures. Any mistake in following this guide can result in an inaccessible website or data loss.

You are proceeding at your own risk. The author strongly recommends that you perform a full backup (both files and database) before attempting any method in this article. The author is not liable for any damage or data loss that may occur.

How to Add an Advanced Preloader with a Percentage Counter to WordPress#

Improve your website’s user experience by implementing a dynamic preloader that displays a clean CSS rotation animation, your site logo, and a percentage counter that moves from 0% to 100%.

The counter will quickly move to 99%, waiting for the page to load, before reaching 100% and gracefully disappearing.

Here’s how to add it to your WordPress theme manually.

Step 1: Add the HTML Structure#

First, we need to place the HTML for the preloader right after the opening <body> tag so it’s the first thing to render.

Location: Edit your theme’s header.php file and place the following code directly after the <?php wp_body_open(); ?> function.

<div class="preloader">
    <div class="preloader-content">
        <div class="loading-spinner"></div>
        <img class="preloader-logo" src="YOUR_LOGO_URL" alt="Logo">
        <div class="percentage-counter">0%</div>
    </div>
</div>

html

Important: Replace YOUR_LOGO_URL with the actual URL of your logo image, which you can upload via the WordPress Media Library.

Step 2: Style the Preloader with CSS#

Next, we’ll add the CSS to make the preloader a full-screen overlay, center the content, and create the spinning animation.

Location: In your WordPress dashboard, navigate to Appearance > Customize > Additional CSS and add the following code.

/* ===== Preloader Styling Start ===== */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: #ffffff; /* Change background color here */
    display: flex;
    justify-content: center;
    align-items: center;
}

.preloader-content {
    text-align: center;
}

/* Spinner Animation */
.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1); /* Base ring color */
    border-left-color: #333; /* Spinning part color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto; /* Space between spinner and logo */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Preloader Logo */
.preloader-logo {
    max-width: 150px; /* Adjust max logo size */
    height: auto;
    display: block;
    margin-bottom: 20px; /* Space between logo and percentage */
}

/* Percentage Counter Text */
.percentage-counter {
    font-size: 24px;
    font-weight: bold;
    color: #333; /* Percentage text color */
    font-family: sans-serif;
}
/* ===== Preloader Styling End ===== */

css

Step 3: Implement the JavaScript Logic#

This is the core logic that runs the percentage counter and hides the preloader once the site is fully loaded. WordPress includes jQuery by default, so we can use it directly.

Location: Edit your theme’s footer.php file and place the following script just before the closing </body> tag (and after the <?php wp_footer(); ?> function).

<script>
jQuery(document).ready(function($) {
    let counter = 0;
    const counterElement = $('.percentage-counter');

    // Start an interval to increment the counter (simulates progress)
    const interval = setInterval(() => {
        if (counter >= 99) {
            clearInterval(interval); // Stop at 99%
            return;
        }
        counter++;
        counterElement.text(counter + '%');
    }, 30); // The interval speed in ms. Smaller is faster.

    // The 'load' event fires when the entire page is fully loaded
    $(window).on('load', function() {
        // Clear the interval just in case it's still running
        clearInterval(interval);
        
        // Force the counter to 100%
        counterElement.text('100%');
        
        // Add a short delay for the user to see 100%, then fade out
        $('.preloader').delay(300).fadeOut(500);
    });
});
</script>

html

Once you have added these three code blocks, your WordPress site will now feature a professional and dynamic preloader that improves the perceived performance and overall user experience.

The repo link is also posted here: https://github.com/farrosfr/jquery-preloader-with-counter ↗

Alhamdulillah. Hope it usefull.