Die Schaltflächen von Twitter Bootstrap haben einen schönen Loading...
Status.
Die Sache ist, dass es nur eine Nachricht zeigt, die wie folgt Loading...
durch das data-loading-text
Attribut geleitet wird:
<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>
Wenn Sie sich Font Awesome ansehen, sehen Sie, dass es jetzt ein animiertes Spinner-Symbol gibt .
Ich habe versucht, dieses Spinner-Symbol zu integrieren, wenn ich eine Upload
Operation wie diese ausgelöst habe:
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
aber das hatte überhaupt keine Auswirkung, das heißt, ich sehe nur den Uploading...
Text auf der Schaltfläche.
Ist es möglich, ein Symbol hinzuzufügen, wenn sich die Schaltfläche im Ladezustand befindet? Es sieht so aus, als würde Bootstrap im Ladezustand nur das Symbol <i class="icon-upload icon-large"></i>
innerhalb der Schaltfläche entfernen .
Hier ist eine einfache Demo , die das oben beschriebene Verhalten zeigt. Wie Sie sehen, verschwindet das Symbol einfach, wenn es in den Ladezustand wechselt. Es wird direkt nach dem Zeitintervall wieder angezeigt.
quelle
Antworten:
Wenn man sich die aussehen Bootstrap-button.js Quelle, werden Sie sehen , dass die Bootstrap - Plugin die Tasten innere html mit ersetzt , was auch immer ist in datenladende-Text beim Aufruf
$(myElem).button('loading')
.Für Ihren Fall denke ich, dass Sie dies einfach tun sollten:
quelle
HTML
mit Text in einer Tag-Eigenschaft mischen kann . :-)data-loading-text
ist seit Version 3.3.5 veraltet und wird in Version 4 entfernt.Einfache Lösung für Bootstrap 3 mit CSS3-Animationen.
Fügen Sie Folgendes in Ihr CSS ein:
Fügen Sie dann einfach die
spinning
Klasse zu einemglyphicon
Ladevorgang hinzu, um Ihr Drehsymbol zu erhalten:Basierend auf http://www.bootply.com/128062#
quelle
animation
und nicht-animation
?animation
statt aktualisiert-animation
. Mit dieser Änderung gut in FF und IE für mich. Die Firefox-Animation sieht allerdings nicht sehr flüssig aus.Dafür gibt es jetzt ein vollwertiges Plugin:
http://msurguy.github.io/ladda-bootstrap/
quelle
Damit die Lösung von @flion wirklich gut aussieht, können Sie den Mittelpunkt für dieses Symbol so einstellen, dass es nicht auf und ab wackelt. Bei einer kleinen Schriftgröße sieht das für mich richtig aus:
quelle
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }
arbeitete für mich{ transform-origin: 50% 49%; }
in meinem Fall lösen, wo ichcog
stattdessen benutze .Hier ist meine Lösung für Bootstrap 4:
Probieren Sie es auf JSFiddle aus
quelle
Dies sind meine, basierend auf reinen SVG- und CSS-Animationen. Achten Sie nicht auf den JS-Code im folgenden Snippet, er dient nur zu Demozwecken. Fühlen Sie sich frei, Ihre benutzerdefinierten basierend auf meinen zu machen, es ist super einfach.
Auch auf CodePen verfügbar: https://codepen.io/anon/pen/PeRazr
quelle
Hier ist eine vollwertige CSS-Lösung, die von Bulma inspiriert wurde. Einfach hinzufügen
quelle