SORU
10 ŞUBAT 2013, Pazar


Nasıl'Yükleme durumu olduğunda düğmeye spinner bir simge eklemek için?

Twitter Bootstrap's buttons Loading... çok iyi bir ruh hali mevcut.

Bunu sadece Loading... gibi bir mesaj şöyle: data-loading-text öznitelik geçtiğini gösterir

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

Font Awesome bakarak, şimdi animated spinner icon bir şey var, bakın.

Bu gibi Upload operasyon ateş ederken spinner simge entegre etmeye çalıştım:

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

ama bu hiç bir etkisi olmadı, yani sadece düğmesi Uploading... metne bakın.

Düğmesine Yükleme durumdayken bir simge eklemek mümkün mü? Bir şekilde Bootstrap gibi görünüyor sadece Yükleme durumda iken bu düğmenin içindeki simgesi <i class="icon-upload icon-large"></i> kaldırır.


İşte ben yukarıda tarif davranışı gösteren demo basit. Yükleme durumu girerken gördüğünüz gibi simgesi kaybolur. Zaman aralığı sonra tekrar belirir.

CEVAP
9 EKİM 2014, PERŞEMBE


Basit çözümBootstrap 3CSS3 animasyonlar kullanarak.

CSS aşağıdaki yerleştirin:

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

O zaman sadece iplik simge almak için glyphicon yükleme spinning sınıf ekleyin:

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

http://www.bootply.com/128062# dayanarak

  • Not: aşağıda CSS3 animasyonları desteklemez 9.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • FattySpins's channel

    FattySpins's

    17 Mayıs 2009
  • WePlayWeWatch

    WePlayWeWatc

    3 Temmuz 2013
  • wwjoshdu

    wwjoshdu

    18 ŞUBAT 2011