javascript - Bootstrap button "loading" animation works at the end -

i have button calls ajax function , show users' info in textarea

html:

<button id="btnusers" class="btn btn-primary pull-left btn-lg" onclick='navusers.getusers();' data-loading-text="<i class='fa fa-spinner fa-spin '></i> processing order">  users   </button> <textarea id="resultusers" name="resultusers" cols="100" rows="18" class="form-control"></textarea> 

js:

var navusers = new function (){      this.getusers = function(){        $("#btnusers").button('loading');        $.ajax({ //ajax stuff, shows users in textarea })     }; }; 

the problem is: button's 'loading' animation starts after ajax stuff finished, not before. i've tried 'modal' bootstrap div showing mensajes while loading users , same happens. i've tried beforesendoption in ajax, same results.

var navusers = new function (){      this.getusers = function(){        $("#btnusers").button('loading');        settimeout(function() {           $.ajax({              //ajax stuff,             success:function(){             $("#btnusers").button('reset');           }        })     }, 1000);      }; };