如何添加一个旋转器图标按钮时，它在加载状态？

Twitter 鞋带的扣子有一个很好的 Loading...状态可用。

问题是，它只显示了像 Loading...这样通过 data-loading-text属性传递的消息，如下所示:

查看 Font Awesome，你会发现现在有一个 动画旋转图标动画旋转图标。

我试图在执行 Upload操作时集成这个旋转器图标，如下所示:

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

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

当按钮处于加载状态时，是否可以添加图标？看起来不知怎么的，Bootstrap 在加载状态下移除了按钮内的图标 。

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

445316 次浏览
小开
最佳答案

如果你看一下bootstrap-button.js源代码，你会发现当调用$(myElem).button('loading')时，bootstrap插件用data-loading-text中的任何东西替换了html内部的按钮。

对于你的情况，I 认为你应该能够这样做:

<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>
小开

现在有一个成熟的插件:

http://msurguy.github.io/ladda-bootstrap/ < a href = " http://msurguy.github.io/ladda-bootstrap/ " > < / >

小开

引导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#

  • 注意:IE9及以下不支持CSS3动画。
小开

为了让@flion的解决方案看起来很棒，你可以调整图标的中心点，这样它就不会上下摆动了。这看起来适合我在一个小字体大小:

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

下面是我对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);

在JSFiddle上查看

小开

这些是我的，基于纯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>

在CodePen: https://codepen.io/anon/pen/PeRazr上也可用

小开

这里是一个成熟的css解决方案的灵感来自Bulma。只需添加

    .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;
}
小开
我发现唯一有用的是这里的一个帖子: https://stackoverflow.com/a/44548729/9488229 < / p >

我改进了它，现在它提供了所有这些功能:

  • 单击后禁用该按钮
  • 显示一个动画加载图标使用本机引导
  • 页面加载完成后重新启用按钮
  • 当页面加载完成时，文本将返回原始

Javascript:

$(document).ready(function () {
$('.btn').on('click', function() {
var e=this;
setTimeout(function() {
e.innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Searching...';
e.disabled=true;
},0);
return true;
});
});
小开

您可以使用Bootstrap旋转器。使用“position: absolute”;使两个按钮相互覆盖。使用JavaScript代码，您可以删除前按钮，然后显示后按钮。

        button {
position: absolute;
top: 50px;
left: 150px;
width: 150px;
font-size: 120%;
padding: 5px;
background: #B52519;
color: #EAEAEA;
border: none;
margin: 120px;
border-radius: 5px;
display: flex;
align-content: center;
justify-content: center;
transition: all 0.5s;
height: 40px
}


#orderButton:hover {
color: #c8c8c8;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<button><div class="spinner-border"></div></button>
<button id="orderButton" onclick="this.style.display= 'none';">Order!</button>

小开

一种懒惰的方法是使用UTF-8实体代码为半圆\25E0(又名&#x25e0;)，它看起来像◠，然后关键帧动画它。这是一个简单的as:

.busy
{
animation: spin 1s infinite linear;
display:inline-block;
font-weight: bold;
font-family: sans-serif;
font-size: 35px;
font-style:normal;
color:#555;
}


.busy::before
{
content:"\25E0";
}


@keyframes spin
{
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
<i class="busy"></i>


提交答案