Comment ajouter une icône de spinner pour bouton quand il ' s dans l’état de chargement ?

Question

Twitter Bootstrap est les boutons ont un gentil Loading... état disponible.

Le truc, c'est que ça montre juste un message comme Loading... passé à travers l' data-loading-text d'attribut comme ceci:

<button type="button" class="btn btn-primary start" id="btnStartUploads"
        data-loading-text="@Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

En regardant de Police Génial, vous voyez qu'il y a maintenant une animation spinner icône.

J'ai essayé de l'intégrer spinner icône lors de la cuisson d'un Upload fonctionnement comme ceci:

$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');

mais cela n'a eu aucun effet du tout, qui est, je viens de voir l' Uploading... de texte sur le bouton.

Est-il possible d'ajouter une icône lorsque le bouton est à la charge de l'état? Ressemble en quelque sorte Bootstrap supprime juste l'icône <i class="icon-upload icon-large"></i> à l'intérieur du bouton, tandis que, dans la charge de l'état.

---

Voici une démo qui montre le comportement que je décris ci-dessus. Comme vous le voyez quand il pénètre dans le Chargement de l'état de l'icône disparaît. Il reparaît après l'intervalle de temps.

Answer 1

Cette solution est également très élégante :

de : http://www.bootply.com/128062#

alors vous pouvez simplement ajouter et supprimer la classe glyphicon-actualisation-animer lorsque vous le souhaitez

Answer 2

Si vous regardez la source de données d’amorçage-button.js, vous verrez que le plugin « bootstrap » remplace le html interne boutons avec tout ce qui est dans le texte de chargement de données lors de l’appel $(myElem).button('loading').

Pour votre cas, je pense que vous devez juste être capable de faire cela :

Answer 3

Il y a maintenant un plugin à part entière pour cela :

http://msurguy.github.IO/Ladda-bootstrap/