How to show loader on ajax request and hide on responce

My Ajax

$.ajax({
        url: "{{URL::to('/admin/category/check')}}",
        type: "post",
        data: {'valuse':checkValues, '_token': $('input[name=_token]').val()},
        success: function(data){
            alert(data);
        }
    });

i want to show loader on request and hide on responce

RachidLaasri

10 years ago

Best Answer

Level 41

Add a spinner to your html and make it invisible, and make it visible before sending the request

$('#spinner').show();

And hide it again when the request is completed :

success: function(data){
    alert(data);
},
complete: function(){
    $('#spinner').hide();
}

1 like

mehany

10 years ago

Level 13

@RachidLaasri @Alizey, Here is a better approach to Keep code clean:

 // Binds to the global ajax scope
 $( document ).ajaxStart(function() {
    $( "#loading" ).show();
 });

 $( document ).ajaxComplete(function() {
    $( "#loading" ).hide();
 });

jsfiddle

1 like

Please or to participate in this conversation.