Button 当按钮处于'；它处于加载状态吗？

Twitter有一个很好的

加载…

状态可用

---

问题是，它只是显示一条消息，如通过

数据加载文本
属性传递的
加载…
，如下所示：

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

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

但这根本没有效果，也就是说，我只看到按钮上的
上传…
文本

当按钮处于加载状态时，是否可以添加图标？看起来Bootstrap只是在加载状态下删除按钮内的图标


下面是一个简单的例子，展示了我上面描述的行为。正如您看到的，当它进入加载状态时，图标就消失了。它会在时间间隔之后重新出现。
如果您查看源代码，您会看到引导插件在调用
$（myElem）.button（'load'）时会用数据加载文本中的内容替换按钮内部的html。

对于您的情况，我认为您应该能够做到这一点：


@本地化。启动负载
现在有了一个完整的插件：

使用CSS3动画的引导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); }
}

然后只需在加载时将
旋转
类添加到
字形图标
，即可获得旋转图标：

<button class="btn btn-lg btn-warning">
    <span class="glyphicon glyphicon-refresh spinning"></span> Loading...    
</button>


加载。。。

基于


注意：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);


搜寻
var setLoading=函数（）{
var search=$（“#search”）；
如果（！search.data（'normal-text'））{
data（'normal-text'，search.html（））；
}
html（search.data（'load-text'））；
};
var clearLoading=函数（）{
var search=$（“#search”）；
html（search.data（'normal-text'）；
};
设置间隔（（）=>{
设置加载（）；
设置超时（（）=>{
clearLoading（）；
}, 1000);
}, 2000);

在
上查看这些是我的，基于纯SVG和CSS动画。不要注意下面代码片段中的JS代码，它只是用于演示目的。您可以根据我的定制，这非常简单


var svg=d3.选择（“svg”），
columnsCount=3；
['basic'，'basic2'，'basic3'，'basic4'，'loading'，'loading2'，'spin'，'chrome'，'chrome2'，'flower'，'flower2'，'backstreet_boys']{
变量x=（i%列数+1）*200-100，
y=20+（数学层（i/columnsCount）*200）；
svg.append（“文本”）
.attr（'text-anchor'，'middle'）
.attr（“x”，x）
.attr（“y”，y）
.text（（i+1）+“+”+动画）；
svg.append（“圆”）
.attr（“类”，动画）
.attr（“cx”，x）
.attr（“cy”，y+40）
.attr（“r”，16）
});
圆圈{
填充：无；
冲程：#bbb；
笔画宽度：4
}
.基本的{
动画：基本0.5s线性无限；
行程：20-80；
}
@基本关键帧{
0%{stroke dashoffset:100；}
100%{stroke dashoffset:0；}
}
.basic2{
动画：basic2 0.5s线性无限；
行程：80-20；
}
@关键帧basic2{
0%{stroke dashoffset:100；}
100%{stroke dashoffset:0；}
}
.basic3{
动画：basic3 0.5s线性无限；
行程：20-30；
}
@关键帧basic3{
0%{stroke dashoffset:100；}
100%{stroke dashoffset:0；}
}
.basic4{
动画：basic4 0.5s线性无限；
行程数组：1023.3；
}
@关键帧basic4{
0%{stroke dashoffset:100；}
100%{stroke dashoffset:0；}
}
.装货{
动画：加载1s线性无限；
行程偏移：25；
}
@关键帧加载{
0%{笔划dashoffset:0；笔划dasharray:50 0；}
50%{笔划dashoffset:-100；笔划dasharray:0 50；}
100%{笔划dashoffset:-200；笔划dasharray:50 0；}
}
.装载2{
动画：加载2 1s线性无限；
}
@关键帧加载2{
0%{笔划dasharray:528.3；笔划dashoffset:75；}
50%{笔划dasharray:45 5；笔划dashoffset:-50；}
100%{笔划dasharray:528.3；笔划dashoffset:-125；}
}
.旋转{
动画：旋转1s线性无限；
行程偏移：25；
}
@关键帧旋转{
0%{笔划dashoffset:0；笔划dasharray:33.3 0；}
50%{笔划dashoffset:-100；笔划dasharray:0 33.3；}
100%{笔划dashoffset:-200；笔划dasharray:33.3 0；}
}
.铬{
动画：线性无限；
}
@关键帧铬{
0%{笔划dasharray:0 100；笔划dashoffset:25；}
25%{笔划dasharray:75 25；笔划dashoffset:0；}
50%{笔划dasharray:0 100；笔划dashoffset:-125；}
75%{笔划dasharray:75 25；笔划dashoffset:-150；}
100%{笔划dasharray:0 100；笔划dashoffset:-275；}
}
.chrome2{
动画：chrome21s线性无限；
}
@关键帧色度2{
0%{笔划dasharray:0 100；笔划dashoffset:25；}
25%{笔划dasharray:50；笔划dashoffset:0；}
50%{笔划dasharray:0 100；笔划dashoffset:-50；}
75%{笔划dasharray:50；笔划dashoffset:-125；}
100%{笔划dasharray:0 100；笔划dashoffset:-175；}
}
.花{
动画：花1s线性无限；
}
@关键帧花{
0%{笔划dasharray:0 20；笔划dashoffset:25；}
50%{笔划dasharray:20 0；笔划dashoffset:-50；}
100%{笔划dasharray:0 20；笔划dashoffset:-125；}
}
.2{
动画：flower2 1s线性无限；
}
@关键帧2{
0%{笔划dasharray:5 20；笔划dashoffset:25；}
50%{笔划dasharray:20 5；笔划dashoffset:-50；}
100%{笔划dasharray:5 20；笔划dashoffset:-125；}
}
.后街男孩{
动画：后街男孩3s线性无限；
}
@后街男孩的关键帧{
0%{笔划dasharray:528.3；笔划dashoffset:-225；}
15%{行程dasharray:528.3；行程dashoffset:-300
    .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;
    }

$(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;
    });
});