How to add a ” waiting” icon for an ajax in WP frontend?

This is my search js code for processing search :

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 );
            }
        );
    });

});

My question is how to add an icon of waiting (the one that is used in WP admin) near the search button (#searchsubmit) so the user knows after the click that it’s working? The best would be if I use only javasccript inside my existing js code I have posted here.

You can use the inbuilt spinner class :

Add the class to the HTML where you want the spinner to appear, for example after your search button :

<button type="button" id="searchsubmit">Search Button</button>
<span class="spinner"></span> <!-- Add this spinner class where you want it to appear--> 

In jQuery you should add the is-active class to the spinner immediately after the click event; then in your ajax post response you remove the is-active class :

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

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

        e.preventDefault();

         $(".spinner").addClass("is-active"); // add the spinner is-active class before the Ajax posting 

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

                 $(".spinner").removeClass("is-active"); // remove the class after the data has been posted 

            }
        );
    });

});

Hope that helps. See more from WordPress core docs