Show/hide Spinner On Select Change

I'm using LoadAwesome and I want to know how can I show spinner div when I change select value before load the data. Currently I'm using AJAX requests to load the data. Simple expl

Solution 1:

This will give gist of what you can do to load spinner on select change

$("#select_data").on('change', function() {
  // show spinner here
  $('#spinner').show(); // or do addClass('spinner')

  $.ajax({
    url: "test.html"
  }).done(function() {
    // hide again on response of ajax
    $('#spinner').hide(); // or remove class removeClass('spinner')
  });
});

DEMO

Please also add url for LoadAwesome module so that its easier for us

Solution 2:

Use this:

Show on change:

 $('.la-ball-spin-fade').hide();//hide by default  -can use css
    $("#select_data").change(function({     
    $('.la-ball-spin-fade').show();
        //trigger ajax
    });

hide it at ajax success:

...
success:function(data) {
//other data manipulation;
 $('.la-ball-spin-fade').hide();
}

https://jsfiddle.net/mgp699za/1/