Databases
StackOverflow2013
Postsdbo
POHow to add a spinner icon to button when it's in the Loading state?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to add a spinner icon to button when it's in the Loading state?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload