title: Want to load spinner on modal window before ajax function call in jquery
body: <p>I just want to load the spinner when i click on the send email button, where I'm sending the email using ajax function.Once the email is sent I want to hide the spinner. Here is my code:</p>
  
  <p>My spinner loading div</p>
  
  <pre><code>&lt;div id="loader" class="loader" style="display:none;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Spinner class</p>
  
  <pre><code>&lt;style&gt;
  .loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('http://test:8000/images/page_loader.gif') 50% 50%   no-repeat rgb(249,249,249);    
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>My jquery:</p>
  
  <pre><code>$("#send_mail").click(function(){
      $(".loader").show();
      var subject = $("#subject").val(); 
      var token = "{!! csrf_token() !!}";
      var order_id = "{{ @$orders-&gt;id }}";
      var url = "{!! URL::to('/') !!}";
      $.ajax({
          type: 'POST',
          url: url +'/order/'+order_id+'/sendmail',
          data: {'_token':token, 'subject':subject },
          async : false,
          beforeSend: function() { 
  
          }, 
          success : function(data) {
              setTimeout(function()
              {
                  $(".loader").fadeOut("slow");
              },9000);
              var result = JSON.parse(data);
              if(result)
              {
                  $("#email_modal").modal('hide');
                  if(result['status'] == 'success')
                  {
                      $("#mail_success").show();
                      setTimeout(function()
                      {
                          $('#mail_success').hide();
                      },3000);
                  }
                  else
                  {
                      $("#mail_error").show();
                      setTimeout(function()
                      {
                          $('#mail_error').hide();
                      },3000);
                  }
              }
          },
          error: function(data){
              alert(data);
          }
      });
  }); 
  </code></pre>
  
  <p>The problem is, my spinner is started to load after the mail has been sent. Can anyone help me with this like what mistake I'm doing here???</p>
  
  <p>Will appreciate your help!!!</p>
  
  <p>Thanks in advance.</p>