当处于加载状态时，如何将微调器图标添加到button？
Twitter Bootstrap的button有一个很好的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>
看着字体真棒，你会看到现在有一个animation微调图标 。
我尝试着像上面这样发起一个Upload操作来整合这个微调器图标：
$("#btnStartUploads").button('loading'); $("#btnStartUploads i").removeAttr('class'); $("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
但是这完全没有任何效果，也就是说，我只是看到button上的Uploading...文本。
当button处于Loading状态时，是否可以添加图标？ 看起来不知何故，Bootstrap只是在加载状态下移除button内的图标<i class="icon-upload icon-large"></i> 。
这是一个简单的演示 ，显示了我在上面描述的行为。 正如你看到当它进入加载状态时，图标就消失了。 它会在时间间隔后重新出现。
如果您查看bootstrap-button.js源代码，您将看到在调用$(myElem).button('loading')时，引导程序插件会用数据加载文本中的任何内容replacebutton内部的html。
对于你的情况，我认为你应该能够做到这一点：
<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>
Bootstrap 3简单的解决scheme，使用CSS3animation。
将以下内容放入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及以下版本不支持CSS3animation。
现在有一个完整的插件：
为了使@flion的解决scheme看起来非常好，你可以调整该图标的中心点，使其不会上下摆动。 这看起来适合我在一个小字体大小：
.glyphicon-refresh.spinning { transform-origin: 48% 50%; }
