Loading spinner in ember-js

I'm trying to display loading spinner in emberJS during Ajax call. My Code is as given below.I had given the ajax call in the controller action. The problem gif image is shown and hidden after the ajax call.I had also tried ajaxStart and ajaxStop but didn't get the expected results.

$.ajax({
        beforeSend:function(){
            $('#wait').show();
          console.log("started t");
        },
          type:"POST",
          url:"/getdata",
          async:false,
          data:"some",
          complete:function(){
                  $('#wait').hide();
                 }
  });

<div id="wait" style="height: 500px;width: 1200px;display:none">
  <img src="assets/images/pageloader.gif" alt="Loading....">
</div>

Can anyone suggest me the way to display the image on loading.Thank you for any answer in advance.