twitter-bootstrap 如何在按钮处于加载状态时向按钮添加微调图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14793367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add a spinner icon to button when it's in the Loading state?
提问by Leniel Maccaferri
Twitter Bootstrap's buttonshave a nice Loading...state available.
Twitter Bootstrap 的按钮有一个很好的Loading...可用状态。
The thing is that it just shows a message like Loading...passed through the data-loading-textattribute like this:
问题是它只显示一条消息，例如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>
Looking at Font Awesome, you see that there's now an animated spinner icon.
查看 Font Awesome，您会看到现在有一个动画微调图标。
I tried to integrate that spinner icon when firing an Uploadoperation like this:
在触发这样的Upload操作时，我尝试集成该微调器图标：
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
but this had no effect at all, that is, I just see the Uploading...text on the button.
但这根本没有效果，也就是说，我只看到Uploading...按钮上的文字。
Is it possible to add an icon when the button is in the Loading state? Looks like somehow Bootstrap just removes the icon <i class="icon-upload icon-large"></i>inside the button while in the Loading state.
按钮处于加载状态时是否可以添加图标？看起来 Bootstrap 只是<i class="icon-upload icon-large"></i>在加载状态下以某种方式删除了按钮内的图标。
Here's a simple demothat shows the behavior I describe above. As you see when it enters the Loading state the icon just disappears. It reappears right after the time interval.
这是一个简单的演示，显示了我上面描述的行为。正如您看到的，当它进入 Loading 状态时，图标就会消失。它在时间间隔后立即重新出现。
采纳答案by gurch101
If you look at the bootstrap-button.jssource, you'll see that the bootstrap plugin replaces the buttons inner html with whatever is in data-loading-textwhen calling $(myElem).button('loading').
如果你看一下自举button.js源，你会看到引导插件替换的按键内部HTML与无论是在数据加载文本时调用$(myElem).button('loading')。
For your case, I thinkyou should just be able to do this:
对于您的情况，我认为您应该能够做到这一点：
<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>
回答by Flion
Simple solution for Bootstrap 3using CSS3 animations.
使用 CSS3 动画的Bootstrap 3 的简单解决方案。
Put the following in your CSS:
将以下内容放入您的 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); }
}
Then just add the spinningclass to a glyphiconwhile loading to get your spinning icon:
然后只需将spinning类添加到glyphicon加载中即可获得旋转图标：
<button class="btn btn-lg btn-warning">
<span class="glyphicon glyphicon-refresh spinning"></span> Loading...
</button>
Based on http://www.bootply.com/128062#
基于http://www.bootply.com/128062#
- Note: IE9 and below do not support CSS3 animations.
- 注意：IE9 及以下不支持 CSS3 动画。
回答by raveren
回答by jake
To make the solution by @flion look really great, you could adjust the center point for that icon so it doesn't wobble up and down. This looks right for me at a small font size:
为了使@flion 的解决方案看起来非常棒，您可以调整该图标的中心点，使其不会上下摆动。这看起来适合我的小字体：
.glyphicon-refresh.spinning {
transform-origin: 48% 50%;
}
回答by mikemsq
Here's my solution for Bootstrap 4:
这是我对 Bootstrap 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);
Check it out on JSFiddle
回答by Damiano
These are mine, based on pure SVG and CSS animations. Don't pay attention to JS code in the snippet bellow, it's just for demoing purposes. Feel free to make your custom ones basing on mine, it's super easy.
这些是我的，基于纯 SVG 和 CSS 动画。不要关注下面代码片段中的 JS 代码，它只是用于演示目的。随意根据我的定制定制，这非常容易。
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>Also available on CodePen: https://codepen.io/anon/pen/PeRazr
也可在 CodePen 上获得：https://codepen.io/anon/pen/PeRazr
回答by Brendan Weinstein
Here is a full-fledged css solution inspired by Bulma. Just add
这是一个受 Bulma 启发的成熟的 css 解决方案。只需添加
.button {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
min-width: 200px;
max-width: 100%;
min-height: 40px;
text-align: center;
cursor: pointer;
}
@-webkit-keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.button.is-loading {
text-indent: -9999px;
box-shadow: none;
font-size: 1rem;
height: 2.25em;
line-height: 1.5;
vertical-align: top;
padding-bottom: calc(0.375em - 1px);
padding-left: 0.75em;
padding-right: 0.75em;
padding-top: calc(0.375em - 1px);
white-space: nowrap;
}
.button.is-loading::after {
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
}
