如何添加微調器圖標到按鈕，當它在加載狀態？

169

推特Bootstrap's buttons有一個不錯的Loading...狀態可用。如何添加微調器圖標到按鈕，當它在加載狀態？

的事情是，它只是顯示一個消息像Loading...通過data-loading-text屬性這樣過去了：

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

望着字體真棒，你看到有現在是animated spinner icon。

我試圖集成了微調圖標射擊時的Upload操作是這樣的：

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

但沒有效果可言，那就是，我只看到按鈕上的文字Uploading...。

當按鈕處於加載狀態時，可以添加圖標嗎？看起來不知何故Bootstrap只是在加載狀態下刪除按鈕內的圖標<i class="icon-upload icon-large"></i>。

下面是一個簡單的demo，它顯示了我在上面描述的行爲。正如您在進入加載狀態時看到的那樣，圖標就會消失。它會在時間間隔後重新出現。

來源

2013-02-10 Leniel Macaferi

您可以檢查出我的解決方案，以動畫微調外觀： http://stackoverflow.com/questions/15982233/spinner-for-twitter-boostrap-btn – 2013-05-21 11:46:54

我推薦使用這種方法http://stackoverflow.com/a/15988830/437690 – limitium 2014-01-31 12:45:34

如果你看一下bootstrap-button.js來源，你會看到引導插件替換的按鍵內部使用的HTML調用$(myElem).button('loading')時，無論是在數據加載文本。

對於你的情況，我認爲你就應該能夠做到這一點：

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

來源

2013-02-10 04:11:53 gurch101

工程偉大的gurch101！我忘記了可以在標籤屬性中混合使用HTML和文本。 :-) – 2013-02-10 16:23:39

@EricFreese：謝謝你的小提琴伴侶。 – 2013-02-10 16:24:06

+58

那個小提琴似乎不適合我（Chrome 28）。 – 2013-08-16 08:54:18

現在有應該是一個全面的插件：

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

來源

2013-09-18 09:09:47 raveren

Hi @Eru Penkman。你和原作有什麼區別？ – 2014-03-08 17:33:40

嘿伊萬，排序，但我從來沒有到處去更新我的副本ladda！這只是原創，我刪除了我以前的評論。對於那個很抱歉！ – roo2 2014-03-09 12:11:15

291

的簡單解決方案Bootstrap 3使用CSS3動畫。

把你的CSS如下：

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

然後，只需添加spinning類的而載入，讓您的紡紗圖標：基於http://www.bootply.com/128062#

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

注意：IE9及以下版本不支持CSS3動畫。

來源

2014-10-09 16:35:40 Flion

它不應該是'動畫'而不是'-animation'？ – 2015-02-06 09:16:03

優秀的解決方案。我在桌面和iPad上的Safari中遇到了這種動畫問題。它顯示圖標，但不會動畫它。有沒有經歷過這樣的事情？ – JayhawksFan93 2015-03-18 21:18:45

@ JayhawksFan93是的，我最近注意到在IE中相同。將很快研究它 – Flion 2015-03-19 08:19:41

要使@ flion的解決方案看起來非常棒，您可以調整該圖標的中心點，使其不會上下晃動。這看起來適合我的小字體大小：

.glyphicon-refresh.spinning { 
    transform-origin: 48% 50%; 
}

來源

2015-07-27 21:54:20 jake

'.glyphicon-refresh.spinning {transform-origin：50％58％; }'爲我工作 – oluckyman 2015-09-26 09:24:39

嗡嗡聲，'{轉換 - 起源：50％49％; }'解決我的情況，而不是使用'cog'。 – 2016-03-18 17:49:49

我也注意到擺動，但改變這些數字的理由是什麼？我應該如何調整它們？ – elachell 2018-01-21 20:00:11

這裏是我的自舉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);

檢查出來的JSFiddle

來源

2017-11-29 00:26:44 mikemsq

如何添加微調器圖標到按鈕，當它在加載狀態？

回答

相關問題