button - 当按钮处于加载状态时，如何向按钮添加微调器图标？

Question

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

查看 Font Awesome，您会发现现在有一个 animated spinner icon .

我尝试在发射 Upload 时集成该微调器图标操作如下:

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

但这根本没有任何效果，也就是说，我只看到Uploading...按钮上的文字。

按钮处于Loading状态时是否可以添加图标？看起来像 Bootstrap 以某种方式删除了图标 <i class="icon-upload icon-large"></i>处于加载状态时在按钮内。

<小时/>

这是一个简单的 demo这显示了我上面描述的行为。正如您所看到的，当它进入加载状态时，图标就会消失。它会在时间间隔后立即重新出现。

Answer 1

使用 CSS3 动画的 Bootstrap 3 的简单解决方案。

将以下内容放入 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 类添加到 glyphicon 即可获取旋转图标:

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

基于http://www.bootply.com/128062#

• 注意:IE9及以下版本不支持CSS3动画。