title: How to add a spinner icon to button when it's in the Loading state?
body: <p>Twitter <a href="http://getbootstrap.com/javascript/#buttons" rel="noreferrer">Bootstrap's buttons</a> have a nice <code>Loading...</code> state available.</p>
  
  <p>The thing is that it just shows a message like <code>Loading...</code> passed through the <code>data-loading-text</code> attribute like this:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary start" id="btnStartUploads"
          data-loading-text="@Localization.Uploading"&gt;
      &lt;i class="icon-upload icon-large"&gt;&lt;/i&gt;
      &lt;span&gt;@Localization.StartUpload&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Looking at Font Awesome, you see that there's now an <a href="http://fortawesome.github.com/Font-Awesome/#examples" rel="noreferrer">animated spinner icon</a>.</p>
  
  <p>I tried to integrate that spinner icon when firing an <code>Upload</code> operation like this:</p>
  
  <pre><code>$("#btnStartUploads").button('loading');
  $("#btnStartUploads i").removeAttr('class');
  $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
  </code></pre>
  
  <p>but this had no effect at all, that is, I just see the <code>Uploading...</code> text on the button.</p>
  
  <p>Is it possible to add an icon when the button is in the Loading state? Looks like somehow Bootstrap just removes the icon <code>&lt;i class="icon-upload icon-large"&gt;&lt;/i&gt;</code> inside the button while in the Loading state.</p>
  
  <hr>
  
  <p>Here's a simple <a href="http://jsbin.com/obogof/2" rel="noreferrer">demo</a> that shows the behavior I describe above. As you see when it enters the Loading state the icon just disappears. It reappears right after the time interval.</p>