Question Comment ajouter une icône spinner au bouton lorsqu'il est dans l'état de chargement?


Gazouillement Boutons Bootstrap passe un bon Loading... état disponible.

La chose est que cela montre juste un message comme Loading... passé à travers le data-loading-text 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 Font Awesome, vous voyez qu'il y a maintenant un icône de la roulette animée.

J'ai essayé d'intégrer cette icône de fileur lors du tir d'un Upload opération 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, c'est-à-dire que je vois juste le Uploading... texte sur le bouton.

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


Voici un simple démo cela montre le comportement que je décris ci-dessus. Comme vous le voyez quand il entre dans l'état de chargement, l'icône disparaît juste. Il réapparaît juste après l'intervalle de temps.


176
2018-02-10 00:43


origine


Réponses:


Si vous regardez le bootstrap-button.js source, vous verrez que le plugin bootstrap remplace les boutons internes html avec tout ce qui est dans texte de chargement de données en appelant $(myElem).button('loading').

Pour votre cas, je pense vous devriez juste être capable de faire ceci:

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

96
2018-02-10 04:11



Solution simple pour Bootstrap 3 utiliser des animations CSS3.

Mettez ce qui suit dans votre CSS:

.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); }
}

Puis ajoutez simplement le spinning classe à un glyphicon pendant le chargement pour obtenir votre icône de filature:

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

Basé sur http://www.bootply.com/128062#

  • Remarque: IE9 et les versions ultérieures ne prennent pas en charge les animations CSS3.

303
2017-10-09 16:35



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

http://msurguy.github.io/ladda-bootstrap/


65
2017-09-18 09:09



Pour que la solution de @flion soit vraiment géniale, vous pouvez ajuster le point central de cette icône pour qu'elle ne vacille pas. Cela me semble juste pour une petite taille de police:

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}

12
2017-07-27 21:54



Voici ma solution pour Bootstrap 4:

<button id="search" class="btn btn-primary" 
data-loading-text="<i class='fa fa-spinner fa-spin fa-fw' aria-hidden='true'></i>Searching">
  Search
</button>

var setLoading = function () {
  var search = $('#search');
  if (!search.data('normal-text')) {
    search.data('normal-text', search.html());
  }
  search.html(search.data('loading-text'));
};

var clearLoading = function () {
  var search = $('#search');
  search.html(search.data('normal-text'));
};

setInterval(() => {
  setLoading();
  setTimeout(() => {
    clearLoading();
  }, 1000);
}, 2000);

Découvrez-le sur JSFiddle


1
2017-11-29 00:26