Twitter的引导的按钮有一个很好的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>
纵观字体真棒，你看，现在有一个动画旋转的图标 。
我试图集成了微调图标射击的时候Upload操作是这样的：
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
但是这并没有影响可言，那就是，我只看到Uploading...按钮文本。
是否可以添加一个图标时，该按钮处于加载状态？ 看起来像以某种方式自举只是删除了图标<i class="icon-upload icon-large"></i>按钮内部，而在加载状态。
这里有一个简单的演示 ，显示我上面描述的行为。 正如你看到的，当它进入加载状态的图标就会消失。 它的时间间隔之后再次出现。
如果你看一下自举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>
自举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类的glyphicon而载入，让您的纺纱图标：
<button class="btn btn-lg btn-warning">
<span class="glyphicon glyphicon-refresh spinning"></span> Loading...
</button>
基于http://www.bootply.com/128062#
现在有应该是一个全面的插件：
http://msurguy.github.io/ladda-bootstrap/
为了使通过@flion看看真正伟大的解决方案，你可以调整该图标中心点所以它不会摇晃，上下。 这看起来适合我在一个小的字体大小：
.glyphicon-refresh.spinning {
transform-origin: 48% 50%;
}
这里是我的自举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
这些是我的，基于纯SVG和CSS动画。 不注重JS代码片断波纹管，它只是demoing目的。 随意让你自定义的基础上我的，它的超级容易。
var svg = d3.select("svg"), columnsCount = 3; ['basic', 'basic2', 'basic3', 'basic4', 'loading', 'loading2', 'spin', 'chrome', 'chrome2', 'flower', 'flower2', 'backstreet_boys'].forEach(function(animation, i){ var x = (i%columnsCount+1) * 200-100, y = 20 + (Math.floor(i/columnsCount) * 200); svg.append("text") .attr('text-anchor', 'middle') .attr("x", x) .attr("y", y) .text((i+1)+". "+animation); svg.append("circle") .attr("class", animation) .attr("cx", x) .attr("cy", y+40) .attr("r", 16) });
circle { fill: none; stroke: #bbb; stroke-width: 4 } .basic { animation: basic 0.5s linear infinite; stroke-dasharray: 20 80; } @keyframes basic { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic2 { animation: basic2 0.5s linear infinite; stroke-dasharray: 80 20; } @keyframes basic2 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic3 { animation: basic3 0.5s linear infinite; stroke-dasharray: 20 30; } @keyframes basic3 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic4 { animation: basic4 0.5s linear infinite; stroke-dasharray: 10 23.3; } @keyframes basic4 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .loading { animation: loading 1s linear infinite; stroke-dashoffset: 25; } @keyframes loading { 0% {stroke-dashoffset: 0; stroke-dasharray: 50 0; } 50% {stroke-dashoffset: -100; stroke-dasharray: 0 50;} 100% { stroke-dashoffset: -200;stroke-dasharray: 50 0;} } .loading2 { animation: loading2 1s linear infinite; } @keyframes loading2 { 0% {stroke-dasharray: 5 28.3; stroke-dashoffset: 75;} 50% {stroke-dasharray: 45 5; stroke-dashoffset: -50;} 100% {stroke-dasharray: 5 28.3; stroke-dashoffset: -125; } } .spin { animation: spin 1s linear infinite; stroke-dashoffset: 25; } @keyframes spin { 0% {stroke-dashoffset: 0; stroke-dasharray: 33.3 0; } 50% {stroke-dashoffset: -100; stroke-dasharray: 0 33.3;} 100% { stroke-dashoffset: -200;stroke-dasharray: 33.3 0;} } .chrome { animation: chrome 2s linear infinite; } @keyframes chrome { 0% {stroke-dasharray: 0 100; stroke-dashoffset: 25;} 25% {stroke-dasharray: 75 25; stroke-dashoffset: 0;} 50% {stroke-dasharray: 0 100; stroke-dashoffset: -125;} 75% {stroke-dasharray: 75 25; stroke-dashoffset: -150;} 100% {stroke-dasharray: 0 100; stroke-dashoffset: -275;} } .chrome2 { animation: chrome2 1s linear infinite; } @keyframes chrome2 { 0% {stroke-dasharray: 0 100; stroke-dashoffset: 25;} 25% {stroke-dasharray: 50 50; stroke-dashoffset: 0;} 50% {stroke-dasharray: 0 100; stroke-dashoffset: -50;} 75% {stroke-dasharray: 50 50; stroke-dashoffset: -125;} 100% {stroke-dasharray: 0 100; stroke-dashoffset: -175;} } .flower { animation: flower 1s linear infinite; } @keyframes flower { 0% {stroke-dasharray: 0 20; stroke-dashoffset: 25;} 50% {stroke-dasharray: 20 0; stroke-dashoffset: -50;} 100% {stroke-dasharray: 0 20; stroke-dashoffset: -125;} } .flower2 { animation: flower2 1s linear infinite; } @keyframes flower2 { 0% {stroke-dasharray: 5 20; stroke-dashoffset: 25;} 50% {stroke-dasharray: 20 5; stroke-dashoffset: -50;} 100% {stroke-dasharray: 5 20; stroke-dashoffset: -125;} } .backstreet_boys { animation: backstreet_boys 3s linear infinite; } @keyframes backstreet_boys { 0% {stroke-dasharray: 5 28.3; stroke-dashoffset: -225;} 15% {stroke-dasharray: 5 28.3; stroke-dashoffset: -300;} 30% {stroke-dasharray: 5 20; stroke-dashoffset: -300;} 45% {stroke-dasharray: 5 20; stroke-dashoffset: -375;} 60% {stroke-dasharray: 5 15; stroke-dashoffset: -375;} 75% {stroke-dasharray: 5 15; stroke-dashoffset: -450;} 90% {stroke-dasharray: 5 15; stroke-dashoffset: -525;} 100% {stroke-dasharray: 5 28.3; stroke-dashoffset: -925;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> <svg width="600px" height="700px"></svg>
也可在CodePen： https://codepen.io/anon/pen/PeRazr
