Bagaimana cara menambahkan ikon pemintal ke tombol ketika itu dalam status Memuat?

191

Tombol Twitter Bootstrap memiliki status yang bagus Loading....

Masalahnya adalah itu hanya menampilkan pesan seperti Loading...melewati data-loading-textatribut seperti ini:

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

Melihat Font Awesome, Anda melihat bahwa sekarang ada ikon pemintal animasi .

Saya mencoba mengintegrasikan ikon pemintal itu ketika menjalankan Uploadoperasi seperti ini:

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

tetapi ini tidak berpengaruh sama sekali, yaitu, saya hanya melihat Uploading...teks pada tombol.

Mungkinkah menambahkan ikon saat tombol berada dalam status Memuat? Sepertinya Bootstrap entah bagaimana hanya menghilangkan ikon <i class="icon-upload icon-large"></i>di dalam tombol saat dalam kondisi Memuat.


Berikut ini adalah demo sederhana yang menunjukkan perilaku yang saya jelaskan di atas. Seperti yang Anda lihat ketika memasuki status Memuat ikon hanya menghilang. Ini muncul kembali tepat setelah interval waktu.

Leniel Maccaferri
sumber
1
Anda dapat memeriksa solusi saya untuk menghidupkan tampilan pemintal: stackoverflow.com/questions/15982233/…
Andrew Dryga
Saya merekomendasikan untuk menggunakan pendekatan ini stackoverflow.com/a/15988830/437690
limitium

Jawaban:

101

Jika Anda melihat sumber bootstrap-button.js , Anda akan melihat bahwa plugin bootstrap menggantikan tombol html dalam dengan apa pun yang ada di data-loading-teks saat memanggil $(myElem).button('loading').

Untuk kasus Anda, saya pikir Anda hanya bisa melakukan ini:

<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
sumber
1
Bekerja gurch101 hebat! Saya lupa bahwa seseorang dapat bercampur HTMLdengan teks dalam properti tag. :-)
Leniel Maccaferri
11
Fiddle tidak bekerja untuk Safari 6.0.5 (7536.30.1), Chrome 31.0.1604.0 kenari di Mac OS X.
Burak Erdem
16
Tetap: jsfiddle.net/6U5q2/270 Catatan ini untuk v2.3.2. Tidak tahu apakah itu berfungsi untuk 3.x
Eric Freese
13
data-loading-textsudah tidak digunakan lagi sejak v3.3.5 dan akan dihapus di v4.
Jonathan
2
@ Jonathan Jika tidak digunakan lagi di v3.3.5, apa pengganti untuk keduanya setelah v3.3.5 dan v4?
PaladiN
324

Solusi sederhana untuk Bootstrap 3 menggunakan animasi CSS3.

Masukkan yang berikut ini di CSS Anda:

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

Kemudian cukup tambahkan spinningkelas ke glyphiconpemuatan sementara untuk mendapatkan ikon pemintalan Anda:

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

Berdasarkan pada http://www.bootply.com/128062#

  • Catatan: IE9 dan di bawah ini tidak mendukung animasi CSS3.
Flion
sumber
4
Bukankah seharusnya begitu animationdan tidak -animation?
Andrey Mikhaylov - lolmaus
3
Solusi yang sangat baik. Saya mengalami masalah dengan animasi ini di Safari di desktop dan di iPad. Ini menunjukkan ikon tetapi tidak menghidupkannya. Pernah mengalami hal seperti itu?
JayhawksFan93
@ JayhawksFan93 ya saya baru-baru ini memperhatikan hal yang sama di IE. Akan segera
memeriksanya
2
jawabannya diperbarui menjadi animationbukan -animation. Dengan perubahan itu baik-baik saja di FF dan IE untuk saya. Animasi firefox tidak terlihat sangat mulus.
Flion
1
+1. Ditemukan yang serupa di sini .... Posting untuk dicatat ...
Fr0zenFyr
66

Sekarang ada plugin lengkap untuk itu:

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

gua
sumber
1
Hai @Eru Penkman. Apa perbedaan antara milik Anda dan aslinya?
Ivan Wang
Hei Ivan, urutkan tetapi saya tidak pernah sempat memperbarui salinan ladda saya! Itu hanya yang asli, saya menghapus komentar saya sebelumnya. Maaf soal itu!
roo2
13

Untuk membuat solusi oleh @flion terlihat sangat bagus, Anda dapat menyesuaikan titik tengah untuk ikon itu sehingga tidak goyah ke atas dan ke bawah. Ini terlihat tepat untuk saya pada ukuran font kecil:

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}
jake
sumber
1
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }bekerja untuk saya
oluckyman
hum, { transform-origin: 50% 49%; }selesaikan dalam kasus saya di mana saya menggunakan cogsebagai gantinya.
Vitor Canova
Saya juga memperhatikan goyangan, tetapi apa alasan untuk mengubah angka-angka ini? Bagaimana saya harus menyetelnya?
elachell
2

Inilah solusi saya untuk 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);

Lihat di JSFiddle

mikemsq
sumber
2

Ini milik saya, berdasarkan animasi SVG dan CSS murni. Jangan perhatikan kode JS di snippet di bawah, itu hanya untuk keperluan demoing. Jangan ragu untuk membuat yang sesuai dengan kebutuhan saya, itu sangat mudah.

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>

Juga tersedia di CodePen: https://codepen.io/anon/pen/PeRazr

Damiano
sumber
1

Berikut ini adalah solusi css lengkap yang terinspirasi oleh Bulma. Cukup tambahkan

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