Wie füge ich der Schaltfläche ein Drehfeldsymbol hinzu, wenn sie sich im Ladezustand befindet?

189

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-textAttribut 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 UploadOperation 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.

Leniel Maccaferri
quelle
1
Sie können meine Lösung überprüfen, um das Erscheinungsbild des Spinners zu animieren: stackoverflow.com/questions/15982233/…
Andrew Dryga
Ich empfehle diesen Ansatz stackoverflow.com/a/15988830/437690
limitium

Antworten:

101

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:

<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>
gurch101
quelle
1
Funktioniert super gurch101! Ich vergesse, dass man HTMLmit Text in einer Tag-Eigenschaft mischen kann . :-)
Leniel Maccaferri
11
Geige funktioniert nicht für Safari 6.0.5 (7536.30.1), Chrome 31.0.1604.0 Kanarienvogel unter Mac OS X.
Burak Erdem
16
Behoben : jsfiddle.net/6U5q2/270 Beachten Sie, dass dies für v2.3.2 ist. Ich weiß nicht, ob es für 3.x funktioniert
Eric Freese
13
data-loading-textist seit Version 3.3.5 veraltet und wird in Version 4 entfernt.
Jonathan
2
@Jonathan Wenn es in Version 3.3.5 veraltet ist, was ist der Ersatz dafür in Version 3.3.5 und Version 4?
PaladiN
322

Einfache Lösung für Bootstrap 3 mit CSS3-Animationen.

Fügen Sie Folgendes in Ihr CSS ein:

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

Fügen Sie dann einfach die spinningKlasse zu einem glyphiconLadevorgang hinzu, um Ihr Drehsymbol zu erhalten:

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

Basierend auf http://www.bootply.com/128062#

  • Hinweis: IE9 und niedriger unterstützen keine CSS3-Animationen.
Flion
quelle
4
Sollte es nicht sein animationund nicht -animation?
Andrey Mikhaylov - lolmaus
3
Hervorragende Lösung. Ich habe Probleme mit dieser Animation in Safari auf dem Desktop und auf dem iPad. Es zeigt das Symbol, animiert es jedoch nicht. Hast du jemals so etwas erlebt?
JayhawksFan93
@ JayhawksFan93 ja das habe ich kürzlich im IE bemerkt. Werde es bald untersuchen
Flion
2
Die Antwort wurde auf animationstatt aktualisiert -animation. Mit dieser Änderung gut in FF und IE für mich. Die Firefox-Animation sieht allerdings nicht sehr flüssig aus.
Flion
1
+1.
Habe
66

Dafür gibt es jetzt ein vollwertiges Plugin:

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

Raveren
quelle
1
Hallo @Eru Penkman. Was ist der Unterschied zwischen Ihrem und dem Original?
Ivan Wang
Hey Ivan, sort, aber ich bin nie dazu gekommen, meine Kopie von ladda zu aktualisieren! Es ist nur das Original, ich habe meinen vorherigen Kommentar entfernt. Das tut mir leid!
Roo2
13

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:

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}
jake
quelle
1
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }arbeitete für mich
oluckyman
summen, { transform-origin: 50% 49%; }in meinem Fall lösen, wo ich cogstattdessen benutze .
Vitor Canova
Ich bemerke auch das Wackeln, aber was ist der Grund für die Änderung dieser Zahlen? Wie soll ich sie einstellen?
Elachell
2

Hier ist meine Lösung für 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);

Probieren Sie es auf JSFiddle aus

mikemsq
quelle
1

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.

var svg = d3.select("svg"),
    columnsCount = 3;

['basic', 'basic2', 'basic3', 'basic4', 'loading', 'loading2', 'spin', 'chrome', 'chrome2', 'flower', 'flower2', 'backstreet_boys'].forEach(function(animation, i){
  var x = (i%columnsCount+1) * 200-100,
      y = 20 + (Math.floor(i/columnsCount) * 200);
  
  
  svg.append("text")
    .attr('text-anchor', 'middle')
    .attr("x", x)
    .attr("y", y)
    .text((i+1)+". "+animation);
  
  svg.append("circle")
    .attr("class", animation)
    .attr("cx",  x)
    .attr("cy",  y+40)
    .attr("r",  16)
});
circle {
  fill: none;
  stroke: #bbb;
  stroke-width: 4
}

.basic {
  animation: basic 0.5s linear infinite;
  stroke-dasharray: 20 80;
}

@keyframes basic {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic2 {
  animation: basic2 0.5s linear infinite;
  stroke-dasharray: 80 20;
}

@keyframes basic2 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic3 {
  animation: basic3 0.5s linear infinite;
  stroke-dasharray: 20 30;
}

@keyframes basic3 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.basic4 {
  animation: basic4 0.5s linear infinite;
  stroke-dasharray: 10 23.3;
}

@keyframes basic4 {
  0%    {stroke-dashoffset: 100;}
  100%  {stroke-dashoffset: 0;}
}

.loading {
  animation: loading 1s linear infinite;
  stroke-dashoffset: 25;
}

@keyframes loading {
  0%    {stroke-dashoffset: 0;    stroke-dasharray: 50 0; }
  50%   {stroke-dashoffset: -100; stroke-dasharray: 0 50;}
  100%  { stroke-dashoffset: -200;stroke-dasharray: 50 0;}
}

.loading2 {
  animation: loading2 1s linear infinite;
}

@keyframes loading2 {
  0% {stroke-dasharray: 5 28.3;   stroke-dashoffset: 75;}
  50% {stroke-dasharray: 45 5;    stroke-dashoffset: -50;}
  100% {stroke-dasharray: 5 28.3; stroke-dashoffset: -125; }
}

.spin {
  animation: spin 1s linear infinite;
  stroke-dashoffset: 25;
}

@keyframes spin {
  0%    {stroke-dashoffset: 0;    stroke-dasharray: 33.3 0; }
  50%   {stroke-dashoffset: -100; stroke-dasharray: 0 33.3;}
  100%  { stroke-dashoffset: -200;stroke-dasharray: 33.3 0;}
}

.chrome {
  animation: chrome 2s linear infinite;
}

@keyframes chrome {
  0%    {stroke-dasharray: 0 100; stroke-dashoffset: 25;}
  25%   {stroke-dasharray: 75 25; stroke-dashoffset: 0;}
  50%   {stroke-dasharray: 0 100;  stroke-dashoffset: -125;}
  75%    {stroke-dasharray: 75 25; stroke-dashoffset: -150;}
  100%   {stroke-dasharray: 0 100; stroke-dashoffset: -275;}
}

.chrome2 {
  animation: chrome2 1s linear infinite;
}

@keyframes chrome2 {
  0%    {stroke-dasharray: 0 100; stroke-dashoffset: 25;}
  25%   {stroke-dasharray: 50 50; stroke-dashoffset: 0;}
  50%   {stroke-dasharray: 0 100;  stroke-dashoffset: -50;}
  75%   {stroke-dasharray: 50 50;  stroke-dashoffset: -125;}
  100%  {stroke-dasharray: 0 100;  stroke-dashoffset: -175;}
}

.flower {
  animation: flower 1s linear infinite;
}

@keyframes flower {
  0%    {stroke-dasharray: 0  20; stroke-dashoffset: 25;}
  50%   {stroke-dasharray: 20 0;  stroke-dashoffset: -50;}
  100%  {stroke-dasharray: 0 20;  stroke-dashoffset: -125;}
}

.flower2 {
  animation: flower2 1s linear infinite;
}

@keyframes flower2 {
  0%    {stroke-dasharray: 5 20;  stroke-dashoffset: 25;}
  50%   {stroke-dasharray: 20 5;  stroke-dashoffset: -50;}
  100%  {stroke-dasharray: 5 20;  stroke-dashoffset: -125;}
}

.backstreet_boys {
  animation: backstreet_boys 3s linear infinite;
}

@keyframes backstreet_boys {
  0%    {stroke-dasharray: 5 28.3;  stroke-dashoffset: -225;}
  15%    {stroke-dasharray: 5 28.3;  stroke-dashoffset: -300;}
  30%   {stroke-dasharray: 5 20;  stroke-dashoffset: -300;}
  45%    {stroke-dasharray: 5 20;  stroke-dashoffset: -375;}
  60%   {stroke-dasharray: 5 15;  stroke-dashoffset: -375;}
  75%    {stroke-dasharray: 5 15;  stroke-dashoffset: -450;}
  90%   {stroke-dasharray: 5 15;  stroke-dashoffset: -525;}
  100%   {stroke-dasharray: 5 28.3;  stroke-dashoffset: -925;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg width="600px" height="700px"></svg>

Auch auf CodePen verfügbar: https://codepen.io/anon/pen/PeRazr

Damiano
quelle
0

Hier ist eine vollwertige CSS-Lösung, die von Bulma inspiriert wurde. Einfach hinzufügen

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative;
      min-width: 200px;
      max-width: 100%;
      min-height: 40px;
      text-align: center;
      cursor: pointer;
    }

    @-webkit-keyframes spinAround {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }
    @keyframes spinAround {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
      }
    }

    .button.is-loading {
      text-indent: -9999px;
      box-shadow: none;
      font-size: 1rem;
      height: 2.25em;
      line-height: 1.5;
      vertical-align: top;
      padding-bottom: calc(0.375em - 1px);
      padding-left: 0.75em;
      padding-right: 0.75em;
      padding-top: calc(0.375em - 1px);
      white-space: nowrap;
    }

    .button.is-loading::after  {
      -webkit-animation: spinAround 500ms infinite linear;
      animation: spinAround 500ms infinite linear;
      border: 2px solid #dbdbdb;
      border-radius: 290486px;
      border-right-color: transparent;
      border-top-color: transparent;
      content: "";
      display: block;
      height: 1em;
      position: relative;
      width: 1em;
    }
Brendan Weinstein
quelle