< Progress loading


function add_loading_text_and_progress() {
    // Enqueue a CSS file for loading icon styles
    wp_enqueue_style('loading-icon-style', get_template_directory_uri() . '/css/loading-icon.css', array(), '1.0');
    // Include JavaScript code inline
    wp_add_inline_script('jquery', '
        jQuery(document).ready(function($) {
            // Function to remove the loading text and progress bar
            function removeLoadingTextAndProgress() {
                var loadingText = $(".loading-text");
                var progressBar = $(".progress-bar");
                var loadingIcon = $(".loading-icon");
                if (loadingText.length) {
                    loadingText.remove();
                }
                if (progressBar.length) {
                    progressBar.remove();
                }
                if (loadingIcon.length) {
                    loadingIcon.remove();
                }
            }
            // When the entire page has finished loading, remove the loading text and progress bar
            $(window).on("load", removeLoadingTextAndProgress);

            // When a user clicks on the mobile screen, show the loading text and progress bar
            $(document).on("click", function() {
                // Create a div element for the loading container
                var loadingContainer = $("<div class=\"loading-container\"></div>");

                // Create a div element for the loading icon
                var loadingIcon = $("<div class=\"loading-icon\"><i class=\"fas fa-spinner fa-spin\"></i></div>");

                // Create a div element for the loading text
                var loadingText = $("<div class=\"loading-text\">Loading...</div>");

                // Create a div element for the progress bar
                var progressBar = $("<div class=\"progress-bar\"></div>");

                // Append the loading icon, loading text, and progress bar to the loading container
                loadingContainer.append(loadingIcon).append(loadingText).append(progressBar);

                // Append the loading container to the body
                $("body").append(loadingContainer);

                // Set a timer to remove the loading container after 2 seconds if progress is not active
                var timer = setTimeout(removeLoadingTextAndProgress, 2000);

                // Example: If progress is detected, you can clear the timer like this
                // clearTimeout(timer);
            });
        });
    ');
    // Define CSS styles for the loading text, progress bar, and loading icon (without background color)
    $css = '
        .loading-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            text-align: center;
        }
        .loading-icon {
            font-size: 35px;
            margin-bottom: 10px;
			font-weight: bold; /* Slightly bolder font */
            color: #FF0000; /* Red text color */		
        }
        .loading-text {
            font-size: 20px;
            font-weight: bold; /* Slightly bolder font */
            color: #FF0000; /* Red text color */
			text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);		
        }
    ';
    // Add the CSS to the head of the document
    wp_add_inline_style('loading-icon-style', $css);
}
// Hook the function to the wp_enqueue_scripts action
add_action('wp_enqueue_scripts', 'add_loading_text_and_progress');

Leave a Comment

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

Shopping Cart
🏠 Home 🛍️ Category 🧑🏻‍⚕️ Account 💝 0 Wishlist 🏦 Wallet
Custom Icon
0
0.00
Scroll to Top