如何在处于加载状态时向按钮添加微调器图标？

Question

Twitter Bootstrap的按钮有一个很好的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,你会看到现在有一​​个动画微调器图标.

我尝试在触发这样的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>在处于加载状态时删除按钮内的图标.

---

这是一个简单的演示,显示了我上面描述的行为.当你看到它进入加载状态时,图标就会消失.它会在时间间隔后重新出现.

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动画.

Answer 2

如果你看一下bootstrap-button.js源代码,你会看到bootstrap插件在调用时用数据加载文本中的任何内容替换内部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>

Answer 3

现在有一个完整的插件:

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

Answer 4

要使@flion的解决方案看起来非常棒,您可以调整该图标的中心点,使其不会上下摆动.这看起来适合我的小字号:

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

Answer 5

一种懒惰的方法是使用半圆\\25E0（又名◠）的 UTF-8 实体代码，它看起来像 \xe2\x97\xa0 ，然后对其进行关键帧动画。很简单：

\n

\r\n

\r\n

.busy\n{\nanimation: spin 1s infinite linear;\ndisplay:inline-block;\nfont-weight: bold;\nfont-family: sans-serif;\nfont-size: 35px;\nfont-style:normal;\ncolor:#555;\n}\n\n.busy::before\n{\ncontent:"\\25E0";\n}\n\n@keyframes spin\n{\n0% {transform: rotate(0deg);}\n100% {transform: rotate(359deg);}\n}

\r\n

<i class="busy"></i>

\r\n

\r\n

\r\n

\n