Нужен индикатор "Работает ..." в моем скрипте WordPress Ajax

Question

У меня есть этот скрипт, который я нашел, который позволяет мне использовать Ajax на стороне пользователя в WordPress, используя Jquery. Работает отлично. Но он должен иметь индикатор «Работает ...», потому что при нажатии кнопки «Отправить» пользователь думает, что ничего не происходит. Вот код, пожалуйста, помогите! Я застрял на этом в течение 2 дней ...

Код ajax.js:

function submit_step_1(){
var step = jQuery("input#name").val(); jQuery.post(ajax.ajaxurl, jQuery("#step_1_form").serialize(),
function(response){jQuery("#step_1_div").html(response);});
}

function submit_step_2(){
var step = jQuery("input#name").val(); jQuery.post(ajax.ajaxurl, jQuery("#step_2_form").serialize(),
function(response){jQuery("#step_2_div").html(response);});
}

Код Ajax.php

<?php

/*
Plugin Name: Ajax Frontend
Plugin URI: 
Description: A simplified ajax front end
Version: 2
Author: 
*/

wp_enqueue_script( 'ajax', plugin_dir_url( __FILE__ ) . 'ajax.js', array( 'jquery' ) );
wp_localize_script( 'ajax', 'ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

add_action( 'wp_ajax_hook_to_step_2', 'step_2m' ); add_action( 'wp_ajax_nopriv_hook_to_step_2', 'step_2m' );

add_action( 'wp_ajax_hook_to_step_3', 'step_3m' ); add_action( 'wp_ajax_nopriv_hook_to_step_3', 'step_3m' );

//Step 1  
function step_1m(){

    echo "<div id='step_1_div'>";
        echo "<form id='step_1_form'>";
            echo "<input id='name' name='name' value='name' type='text'>";
            echo "<input name='action' type='hidden' value='hook_to_step_2'>";
            echo "<input id='submit_button' value='Submit' type='button' onClick='submit_step_1();'>";
        echo "</form>"; 
    echo "</div>";

}

//Step 2
function step_2m(){

    echo "<div id='step_2_div'>";

        $name = $_POST['name'];
        echo $name;

        echo "<form id='step_2_form'>";
            echo "<input id='name' name='name' value='END OF PROCESS' type='text'>";
            echo "<input name='action' type='hidden' value='hook_to_step_3'>";
            echo "<input id='submit_button' value='STOP' type='button' onClick='submit_step_2();'>";
        echo "</form>";

        die();

    echo "</div>";

}

//Step 3
function step_3m(){

        $name = $_POST['name'];
        echo $name;

        die();  
}

add_shortcode("hw_ajax_frontend", "step_1m");

?>

Answer 1

Используйте что-то вроде этого:

var loadingIndicator = $("#loading").hide();
loadingIndicator.ajaxStart(function() {
    loadingIndicator.show();
}).ajaxStop(function() {
    loadingIndicator.hide();
});