Bootstrap : comment ajouter une icône de chargement à un bouton ?

Le framework fournit un attribut qui permet d'afficher du texte lorsque l'événement loading est appelé sur un bouton.

Le framework CSS Bootstrap fournit des boutons qui offrent notamment plus de possibilités pour les modifier. Il est possible d'ajouter une image lors d'un chargement après avoir cliqué sur le bouton. Le framework fournit l'attribut data-loading-text qui peut être utilisé pour afficher du texte lorsque l'événement loading est appelé sur le bouton :

<button type=button class=btn btn-primary start id=monBouton data-loading-text=Chargement...>
<span>@Localization.StartUpload</span>
</button>

Pour lancer le chargement, utilisez l'instruction suivante :

$(#monBouton).button(loading);

Le bouton affichera alors le texte Chargement.... Pour utiliser plutôt une image, il suffit de mettre le code HTML de l'image dans l'attribut data-loading-text :

<button type=button class=btn btn-primary start id=monBouton data-loading-text=<i class='icon-spinner icon-spin icon-large'></i> @Localization.Uploading>
 <span>@Localization.StartUpload</span>
</button>

Si vous souhaitez directement utiliser l'animation classique avec des flèches qui tournent, il vous est possible de la réaliser directement en CSS3. Avec la propriété animation, on peut utiliser l'attribut spin, qui ajoute le symbole du spin. La propriété transform permet de faire une transformation sur l'image. Dans cet exemple, on effectue une rotation de 360 degrés sur le spin toutes les secondes :

.glyphicon.spinning {
animation: spin 1s infinite linear;
-webkit-animation: spin2 1s infinite linear;
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}

Pour l'utiliser, ajoutez l'icône lors du chargement. Vous obtiendrez le code HTML suivant :

<button class=btn btn-lg btn-warning>
<span class=glyphicon glyphicon-refresh spinning></span> Chargement...
</button>

Cette technique fonctionne sur tous les navigateurs modernes, excepté Internet Explorer 9 et les versions antérieures.