Как добавить иконку "ожидания" для ajax на фронтенде WordPress?

Вы можете использовать встроенный класс spinner:

Добавьте класс в HTML там, где должен появиться спиннер, например, после кнопки поиска:

<button type="button" id="searchsubmit">Кнопка поиска</button>
<span class="spinner"></span> <!-- Добавьте этот класс spinner там, где он должен отображаться --> 

В jQuery вам следует добавить класс is-active к спиннеру сразу после события клика; затем в ответе вашего ajax запроса вы удаляете класс is-active:

jQuery(document).ready(function($) {

    $('#searchsubmit').click(function(e){ 

        e.preventDefault();

         $(".spinner").addClass("is-active"); // добавляем класс is-active перед отправкой Ajax 

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'your_action',
                data : data
            },
            function( response ) {

                 $(".spinner").removeClass("is-active"); // удаляем класс после отправки данных 

            }
        );
    });

});

Надеюсь, это поможет. Узнать больше из документации WordPress

jQuery(document).ready(function($) {

    $('#searchsubmit').click(function(e){ 
        e.preventDefault(); // Отменяем стандартное поведение кнопки

        var $button = $(this);
        $button.addClass('disabled').after('<div class="load-spinner"><img src="http://domain.com/path/to/image.gif" alt="Индикатор загрузки" title="Загрузка данных..." /></div>');

        var searchval = $('#s').val(); // Получаем поисковый запрос

        $.post(
            WPaAjax.ajaxurl, // URL для AJAX запроса
            {
                action : 'wpa56343_more', // Экшен для обработки на сервере
                searchval : searchval // Передаем поисковый запрос
            },
            function( response ) {
                $('#results').empty(); // Очищаем блок с результатами
                $('#results').append( response ); // Вставляем новые результаты

                $button.removeClass('disabled'); // Разблокируем кнопку
                $('.load-spinner').remove(); // Удаляем индикатор загрузки
            }
        );
    });

});

jQuery(document).ready(function($){

    $('#searchsubmit').click(function(e){ 
        e.preventDefault();
        var self = $( this );

        var loaderContainer = $( '<span/>', {
            'class': 'loader-image-container'
        }).insertAfter( self );

        var loader = $( '<img/>', {
            src: GET_YOUR_BASE_URL + '/wp-admin/images/loading.gif',
            'class': 'loader-image'
        }).appendTo( loaderContainer );


        var searchval = $('#s').val(); // получаем поисковый запрос

        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more',
                searchval : searchval
            },
            function( response ) {
                $('#results').empty();
                $('#results').append( response );
                loaderContainer.remove();
            }
        );
    });
});

Теперь все, что вам нужно сделать - это указать базовый путь URL до wp-admin, и код должен заработать. Надеюсь, это поможет.

$(function($)
{
    $("#btnSubmit").click(function () 
    {
        // Устанавливаем флаг Valid в True, если выбран один из RadioButton в группе
        var isValid = $("input[name=gender]").is(":checked");   
        // Отображаем сообщение об ошибке, если ни один RadioButton не выбран
        $("#spnError")[0].style.display = isValid ? "none" : "block";
    }),

    $('#contact_form').validate(
    {
        rules:
        {
            uname:
            {
                required:true,
                minlength:3,
                maxlength:15
            },
            uemail:
            {
                required:true,
                email: true,
                minlength:3,                    
            },
            upass:
            {
                required:true,
                minlength:3,
                maxlength:15
            },
            cpass:
            {
                required:true,
                equalTo:'#inputpassword'
            },
            uaddres:
            {
                required:true,
                minlength:3,
                maxlength:100
            },
            gender:
            {
                required:true
            },
            ucity:
            {
                required:true,
                minlength:2,
                maxlength:15
            },
            ustate:
            {
                required:true
            },
            uzip:
            {
                required:true,
                minlength:6,
                maxlength:6 
            }
        
        },
        messages:
        {
            gender:
            {
                required:''
            }
        },
        submitHandler:function(form)
        {
            event.preventDefault();

            var nameid  = $("#inputname").val();
            var emailid = $("#inputemail").val();               
            var passid = $("#inputpassword").val();
            var addid = $("#inputaddress").val();
            var genderid=$('#inputgender[name="gender"]:checked').val();
            var cityid = $("#inputcity").val();
            var stateid = $("#inputstate").val();
            var zipid = $("#inputzip").val();

            var link="<?php echo admin_url('admin-ajax.php'); ?>"
            var form_data=$('#contact_form');
            
            $.ajax({
                    url: link,
                    type: 'post',
                    data: 
                    {
                        action:'contact_form_data',
                        data:form_data.serialize()
                    },
                    beforeSend:function()
                    {
                            $('.loader').show();
                    },
                    success: function (response) 
                    {
                        msg="<div>"+response+"</div>";
                        $('#msg').html(msg);

                        console.log(response);
                        $("#contact_form")[0].reset();
                        $('.loader').hide();
                    }
                });

        }

    });
});