如何在按钮处于加载状态时向按钮添加微调器图标？

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

然后只需在加载时将 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 动画。

---

如果您查看 bootstrap-button.js 源代码，您会看到引导插件在调用 $(myElem).button('loading') 时将按钮内部 html 替换为 data-loading-text 中的任何内容。

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

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

---

要使@flion 的解决方案看起来非常棒，您可以调整该图标的中心点，使其不会上下晃动。这看起来适合我的小字体：

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

---

一个懒惰的方法是使用半圆 \25E0（又名 ◠）的 UTF-8 实体代码，它看起来像 ◠，然后为其设置关键帧动画。这很简单：

.busy { 动画：旋转 1s 无限线性；显示：内联块；字体粗细：粗体；字体系列：无衬线；字体大小：35px；字体样式：正常；颜色：#555; } .busy::before { 内容:"\25E0"; } @keyframes spin { 0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);} }

---

这是我对 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( "圆") .attr("类", 动画) .attr("cx", x) .attr("cy", y+40) .attr("r", 16) });圈{填充：无；中风：#bbb； stroke-width: 4 } .basic { 动画：基本 0.5s 线性无限；中风破折号：20 80； } @keyframes basic { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic2 { 动画：basic2 0.5s 线性无限；中风破折号：80 20； } @keyframes basic2 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic3 { 动画：basic3 0.5s 线性无限；中风破折号：20 30； } @keyframes basic3 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .basic4 { 动画：basic4 0.5s 线性无限；中风破折号：10 23.3； } @keyframes basic4 { 0% {stroke-dashoffset: 100;} 100% {stroke-dashoffset: 0;} } .loading { 动画：加载 1s 线性无限；冲程-dashoffset：25； } @keyframes 加载 { 0% {stroke-dashoffset: 0;中风破折号：50 0； } 50% {stroke-dashoffset: -100; stroke-dasharray: 0 50;} 100% { stroke-dashoffset: -200;stroke-dasharray: 50 0;} } .loading2 { 动画：loading2 1s 线性无限； } @keyframes loading2 { 0% {stroke-dasharray: 5 28.3;中风破折号：75；} 50% {中风破折号：45 5；中风破折号：-50；} 100% {中风破折号：5 28.3；冲程-dashoffset：-125； } } .spin { 动画：旋转 1s 线性无限；冲程-dashoffset：25； } @keyframes spin { 0% {stroke-dashoffset: 0;中风破折号：33.3 0； } 50% {stroke-dashoffset: -100; stroke-dasharray: 0 33.3;} 100% { stroke-dashoffset: -200;stroke-dasharray: 33.3 0;} } .chrome { 动画：chrome 2s 线性无限； } @keyframes chrome { 0% {stroke-dasharray: 0 100;中风破折号：25；} 25% {中风破折号：75 25；中风破折号：0；} 50% {中风破折号：0 100；中风破折号：-125；} 75% {中风破折号：75 25；中风破折号：-150；} 100% {中风破折号：0 100； stroke-dashoffset: -275;} } .chrome2 { 动画：chrome2 1s 线性无限； } @keyframes chrome2 { 0% {stroke-dasharray: 0 100;中风破折号：25；} 25% {中风破折号：50 50；中风破折号：0；} 50% {中风破折号：0 100；中风破折号：-50；} 75% {中风破折号：50 50；中风破折号：-125；} 100% {中风破折号：0 100； stroke-dashoffset: -175;} } .flower { 动画：花 1s 线性无限； } @keyframes 花 { 0% {stroke-dasharray: 0 20;中风破折号：25；} 50% {中风破折号：20 0；中风破折号：-50；} 100% {中风破折号：0 20； stroke-dashoffset: -125;} } .flower2 { 动画：flower2 1s 线性无限； } @keyframes flower2 { 0% {stroke-dasharray: 5 20;中风破折号：25；} 50% {中风破折号：20 5；中风破折号：-50；} 100% {中风破折号：5 20； stroke-dashoffset: -125;} } .backstreet_boys { 动画：backstreet_boys 3s 线性无限； } @keyframes backstreet_boys { 0% {stroke-dasharray: 5 28.3;中风破折号：-225；} 15% {中风破折号：5 28.3；中风破折号：-300；} 30% {中风破折号：5 20；中风破折号：-300；} 45% {中风破折号：5 20；中风破折号：-375；} 60% {中风破折号：5 15；中风破折号：-375；} 75% {中风破折号：5 15；中风破折号：-450；} 90% {中风破折号：5 15；中风破折号：-525；} 100% {中风破折号：5 28.3； stroke-dashoffset: -925;} }

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

---

这是一个受 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;
    }

---

我发现唯一有效的是这里的帖子：https://stackoverflow.com/a/44548729/9488229

我对其进行了改进，现在它提供了所有这些功能：

单击后禁用按钮

使用本机引导程序显示动画加载图标

页面加载完成后重新启用按钮

页面加载完成后文本恢复原状

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 微调器。使用“位置：绝对”使两个按钮相互重叠。使用 JavaScript 代码，您可以删除前面的按钮，然后将显示后面的按钮。

按钮{位置：绝对；顶部：50px；左：150px；宽度：150px；字体大小：120%；填充：5px；背景：#B52519；颜色：#EAEAEA；边框：无；边距：120px；边框半径：5px；显示：弯曲；对齐内容：居中；证明内容：中心；过渡：全部0.5s；高度：40px } #orderButton:hover { 颜色：#c8c8c8; }

< /div>

订购！

---