title: After button click, show spinner icon on button while click event in progress
body: <p>I'm trying to show spinner on button while loading on submit, I have seen a couple of implementations and tried in my application but its not working. Here is the <a href="http://jsfiddle.net/q1d06npq/5/" rel="nofollow">fiddle</a> which I am trying to describe. I want to mention one other thing that this HTML is on my sidebar and being added through javascript on ajax call</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>My JS
  
          (function () {
              $(document).on("click","#submitbutton", function (event) {
                  $(this).addClass('active');
                  var formdata = $("#filterdata").serializeArray();
                  var url1 = "/SelectUnit";
                  $.ajax({url: url1, data: formdata, type: 'GET', async:false .....}).done(function(){
      $(this).removeClass('active');
  
  })
              });
              })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   
  
   My CSS
      
  
  .spinner {
            display: inline-block;
            opacity: 0;
            max-width: 0;
      
            -webkit-transition: opacity 0.25s, max-width 0.45s; 
            -moz-transition: opacity 0.25s, max-width 0.45s;
            -o-transition: opacity 0.25s, max-width 0.45s;
            transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
          }
      
          .has-spinner.active {
            cursor:progress;
          }
      
          .has-spinner.active .spinner {
            opacity: 1;
            max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>My HTML
  &lt;div class="formbuttons"&gt;
              &lt;button type="button" id="submitbutton" class="btn buttoncolor has-spinner"&gt;
                    &lt;span class="spinner"&gt;&lt;i class="icon-spin icon-refresh"&gt;&lt;/i&gt;&lt;/span&gt;Select&lt;/button&gt;
              &lt;button type="button" class="btn buttoncolor" onclick="clearFilter();"&gt;Clear&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>