Как добавить значок ожидания для ajax в WP frontend?

Это мой поисковый js-код для обработки поиска:

jQuery(document).ready(function($){ $('#searchsubmit').click(function(e){ e.preventDefault(); var searchval = $('#s').val(); // get search term $.post( WPaAjax.ajaxurl, { action : 'wpa56343_more', searchval : searchval }, function( response ) { $('#results').empty(); $('#results').append( response ); } ); }); }); 

Мой вопрос заключается в том, как добавить значок ожидания (тот, который используется в WP admin) рядом с кнопкой поиска (#searchsubmit), чтобы пользователь знал после щелчка, что он работает? Лучше всего было бы, если бы я использовал только javasccript внутри существующего кода js, который я разместил здесь.

 jQuery(document).ready(function($) { $('#searchsubmit').click(function(e){ e.preventDefault(); var $button = $(this); $button.addClass('disabled').after('<div class="load-spinner"><img src="http://img.wordpressask.com/templates/image.gif" /></div>'); var searchval = $('#s').val(); // get search term $.post( WPaAjax.ajaxurl, { 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(); // get search term $.post( WPaAjax.ajaxurl, { action : 'wpa56343_more', searchval : searchval }, function( response ) { $('#results').empty(); $('#results').append( response ); loaderContainer.remove(); } ); }); }); 

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