Reign Theme - Custom GIF Site Loader

reign-custom-loader-simple.php

<?php
/**
 * Reign Theme - Custom GIF Site Loader
 * 
 * Add this code to your child theme's functions.php file
 * or create a custom plugin with this code.
 * 
 * @version 1.0.0
 * @link https://wbcomdesigns.com/
 */

add_action('init', function() {
    // Remove default Reign loader
    remove_action('reign_before_page', 'rg_page_loader', 9);
    
    // Add custom loader with GIF
    add_action('reign_before_page', function() {
        // Check if loader is enabled in theme settings
        if (!get_theme_mod('reign_enable_preloading', false)) {
            return;
        }
        
        // CHANGE THIS: Set your custom GIF URL here
        $custom_gif_url = 'https://demos.wbcomdesigns.com/wp-content/uploads/2025/09/loading.gif';
        
        // Get background color from theme settings
        $bg_color = get_theme_mod('reign_preloading_bg_color', '#ffffff');
        ?>
        
        <!-- Custom Site Loader -->
        <div id="custom-site-loader" style="
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: <?php echo esc_attr($bg_color); ?>;
            z-index: 99999;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.3s ease;
        ">
            <img src="<?php echo esc_url($custom_gif_url); ?>" 
                 alt="Loading..." 
                 style="max-width: 150px; height: auto;">
        </div>
        
        <script>
            // Hide loader when page is fully loaded
            window.addEventListener('load', function() {
                var loader = document.getElementById('custom-site-loader');
                if (loader) {
                    setTimeout(function() {
                        loader.style.opacity = '0';
                        setTimeout(function() {
                            loader.remove();
                        }, 300);
                    }, 500); // Minimum display time
                }
            });
        </script>
        <?php
    }, 9);
});

reign-loader-README.md

Reign Theme - Custom GIF Site Loader

Simple solution to replace the default Reign theme site loader with your custom GIF animation.

📦 Installation

Add this code to your child theme's functions.php file:

<?php
// Copy the code from reign-custom-loader-simple.php here

⚙️ Configuration

Step 1: Enable Site Loader

1. Go to Appearance > Customize > General > Layouts
2. Toggle "Site Loader" to ON
3. Save changes

Step 2: Update GIF URL

In the code, find this line and replace with your GIF URL:

// CHANGE THIS: Set your custom GIF URL here
$custom_gif_url = 'https://demos.wbcomdesigns.com/wp-content/uploads/2025/09/loading.gif';

Example URLs to use:

// Using your own uploads folder
$custom_gif_url = '/wp-content/uploads/2024/my-loader.gif';

// Using child theme folder
$custom_gif_url = get_stylesheet_directory_uri() . '/assets/loader.gif';

// Using external CDN
$custom_gif_url = 'https://your-cdn.com/loader.gif';

🎨 Customization

Change GIF Size

Find this line and adjust the max-width:

style="max-width: 150px; height: auto;"

Example: Change to 200px for larger loader

Change Display Time

Find this line and adjust the milliseconds:

}, 500); // Change 500 to your desired time in milliseconds

Example: Change to 1000 for 1 second minimum display

✅ Features

• ✨ Simple one-file solution
• 🎯 Uses theme's existing loader settings
• 🎨 Respects background color from customizer
• 📱 Mobile responsive
• ⚡ Smooth fade-out animation
• 🔧 No plugin required

🔍 Troubleshooting

Issue	Solution
Loader not showing	Check if "Site Loader" is enabled in Customizer
GIF not displaying	Verify the GIF URL is correct and accessible
Loader stays too long	Check browser console for JavaScript errors
Too big/small	Adjust the max-width value in the code

💡 Tips

• Keep GIF file size under 100KB for best performance
• Recommended GIF dimensions: 100-200px width
• Test on mobile devices for responsiveness
• Use transparent background GIFs for best results

📝 Default Example

The code includes a sample GIF from WBComDesigns demo:

https://demos.wbcomdesigns.com/wp-content/uploads/2025/09/loading.gif

Remember to replace this with your own GIF URL!

🆘 Support

For help with Reign theme: WBComDesigns Support