如何添加微调器图标到按钮，当它在加载状态？

169

推特Bootstrap's buttons有一个不错的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>

望着字体真棒，你看到有现在是animated spinner icon。

我试图集成了微调图标射击时的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>。

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

来源

2013-02-10 Leniel Macaferi

您可以检查出我的解决方案，以动画微调外观： http://stackoverflow.com/questions/15982233/spinner-for-twitter-boostrap-btn – 2013-05-21 11:46:54

我推荐使用这种方法http://stackoverflow.com/a/15988830/437690 – limitium 2014-01-31 12:45:34

如果你看一下bootstrap-button.js来源，你会看到引导插件替换的按键内部使用的HTML调用$(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>

来源

2013-02-10 04:11:53 gurch101

工程伟大的gurch101！我忘记了可以在标签属性中混合使用HTML和文本。 :-) – 2013-02-10 16:23:39

@EricFreese：谢谢你的小提琴伴侣。 – 2013-02-10 16:24:06

+58

那个小提琴似乎不适合我（Chrome 28）。 – 2013-08-16 08:54:18

现在有应该是一个全面的插件：

http://msurguy.github.io/ladda-bootstrap/

来源

2013-09-18 09:09:47 raveren

Hi @Eru Penkman。你和原作有什么区别？ – 2014-03-08 17:33:40

嘿伊万，排序，但我从来没有到处去更新我的副本ladda！这只是原创，我删除了我以前的评论。对于那个很抱歉！ – roo2 2014-03-09 12:11:15

291

的简单解决方案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类的而载入，让您的纺纱图标：基于http://www.bootply.com/128062#

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

注意：IE9及以下版本不支持CSS3动画。

来源

2014-10-09 16:35:40 Flion

它不应该是'动画'而不是'-animation'？ – 2015-02-06 09:16:03

优秀的解决方案。我在桌面和iPad上的Safari中遇到了这种动画问题。它显示图标，但不会动画它。有没有经历过这样的事情？ – JayhawksFan93 2015-03-18 21:18:45

@ JayhawksFan93是的，我最近注意到在IE中相同。将很快研究它 – Flion 2015-03-19 08:19:41

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

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

来源

2015-07-27 21:54:20 jake

'.glyphicon-refresh.spinning {transform-origin：50％58％; }'为我工作 – oluckyman 2015-09-26 09:24:39

嗡嗡声，'{转换 - 起源：50％49％; }'解决我的情况，而不是使用'cog'。 – 2016-03-18 17:49:49

我也注意到摆动，但改变这些数字的理由是什么？我应该如何调整它们？ – elachell 2018-01-21 20:00:11

这里是我的自举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

来源

2017-11-29 00:26:44 mikemsq

如何添加微调器图标到按钮，当它在加载状态？

回答

相关问题