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.

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.