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

189

Twitter Bootstrap的按钮具有良好的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>

查看Font Awesome，您会看到现在有一​​个动画微调器图标。

在触发这样的Upload操作时，我尝试集成该微调器图标：

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

但这完全没有效果，也就是说，我只看到Uploading...按钮上的文字。

按钮处于“加载”状态时是否可以添加图标？看起来Bootstrap只是<i class="icon-upload icon-large"></i>在处于Loading状态时只是删除了按钮内的图标。

这是一个简单的演示，展示了我上面描述的行为。如您所见，当它进入“加载”状态时，图标消失了。在该时间间隔后，它会重新出现。

button  twitter-bootstrap  icons  loading  font-awesome 
— 列尼尔·马卡费里
source
1
：您可以检查出我的解决方案，以动画微调外观stackoverflow.com/questions/15982233/...
— 安德鲁Dryga
我建议使用这种方法stackoverflow.com/a/15988830/437690
— 2014年

Answers:

101

如果查看bootstrap-button.js源代码，则会看到bootstrap插件在调用时将html内部的按钮替换为data-loading-text中的内容$(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>
— 古尔奇101
source
1
很棒的gurch101！我忘记了可以HTML在tag属性中与文本混合。:-)
— Leniel Maccaferri
11
小提琴不工作的Safari浏览器6.0.5（7536.30.1），Mac OS X上的Chrome 31.0.1604.0金丝雀
— 布拉克·埃德姆
16
固定：jsfiddle.net/6U5q2/270注意，这是针对v2.3.2的。不知道它是否适用于3.x
— Eric Freese
13
data-loading-text从v3.3.5开始不推荐使用，并将在v4中删除。
— 乔纳森
2
@Jonathan如果v3.3.5中不推荐使用，那么在v3.3.5和v4之后都可以替换吗？
— PaladiN
322

使用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动画。
— 弗利翁
source
4
应该animation不是-animation吗？
— 安德烈·米哈伊洛夫
3
优秀的解决方案。我在桌面版和iPad上的Safari中对此设置动画有问题。它显示图标，但不对其进行动画处理。曾经经历过类似的事情吗？
— JayhawksFan93年
@ JayhawksFan93是的，我最近在IE中注意到了同样的情况。会尽快调查
— -Flion
2
答案已更新为， animation而不是-animation。对于我来说，在FF和IE中所做的更改很好。Firefox的动画看起来并不十分流畅。
— 弗里昂2015年
1
+1。在这里发现了类似的
— 邮件
13

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

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}
— 杰克
source
1
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }为我工作
— oluckyman 2015年
哼，{ transform-origin: 50% 49%; }解决我使用的情况cog。
— Vitor Canova
我也注意到摆动，但是更改这些数字的依据是什么？我应该如何调整它们？
— Elachell '18
2

这是我对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上查看

— 迈克姆斯
source
1

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

— 达米亚诺
source
0

这是受布尔玛启发的成熟的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;
    }
— 布伦丹·温斯坦
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.