Vraag Hoe voeg ik een draaifictogram toe aan de knop wanneer deze in de laadstatus is?


tjilpen Bootstrap's knoppen heb een mooie Loading... staat beschikbaar.

Het ding is dat het net een bericht zoals laat zien Loading... gepasseerd door de data-loading-text kenmerk als dit:

<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>

Als je naar Font Awesome kijkt, zie je dat er nu een is geanimeerde spinner pictogram.

Ik heb geprobeerd om dat spinnerpictogram te integreren bij het maken van een Upload operatie als deze:

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

maar dit had helemaal geen effect, dat wil zeggen, ik zie gewoon het Uploading... tekst op de knop.

Is het mogelijk om een ​​pictogram toe te voegen wanneer de knop in de laadstatus is? Het lijkt erop dat Bootstrap op de een of andere manier het pictogram verwijdert <i class="icon-upload icon-large"></i> binnen de knop terwijl deze in de laadstatus is.


Hier is een eenvoudig demonstratie dat toont het gedrag dat ik hierboven beschrijf. Zoals u ziet wanneer het in de laadstatus komt, verdwijnt het pictogram. Het verschijnt direct na het tijdsinterval.


176
2018-02-10 00:43


oorsprong


antwoorden:


Als je naar de bootstrappen-button.js bron, je zult zien dat de bootstrap-plugin de knoppen binnenste html vervangt door wat er in zit data-loading-text bij het bellen $(myElem).button('loading').

Voor jouw geval, ik denken je zou dit gewoon moeten kunnen doen:

<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



Eenvoudige oplossing voor Bootstrap 3 met behulp van CSS3-animaties.

Zet het volgende in uw 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); }
}

Voeg dan gewoon de spinning klasse tot a glyphicon tijdens het laden om het draaiende pictogram te krijgen:

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

Gebaseerd op http://www.bootply.com/128062#

  • Opmerking: IE9 en lager ondersteunen geen CSS3-animaties.

303
2017-10-09 16:35



Er is nu een volwaardige plug-in voor:

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


65
2017-09-18 09:09



Om de oplossing door @flion er echt goed uit te laten zien, kun je het middelpunt van dat pictogram aanpassen, zodat het niet op en neer schommelt. Dit lijkt mij geschikt voor een kleine lettergrootte:

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

12
2017-07-27 21:54



Dit is mijn oplossing voor 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);

Bekijk het eens JSFiddle


1
2017-11-29 00:26