Spinner for Twitter Bootstrap .btn [英] Spinner for Twitter Bootstrap .btn

问题描述

我试图为Twitter Bootstrap按钮创建旋转。 Spinners应该指出一些正在进行的工作（即ajax请求）。

Im trying to create spinners for Twitter Bootstrap buttons. Spinners should indicate some work in progress (ie. ajax request).

这里是一个小例子：
http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML（full on jsfiddle）：

HTML (full on jsfiddle):

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; /* This doesn't work, just fix for unkown width elements */
}

/* ... */

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

交易是cssmargin：auto并且所有元素的微调宽度应通过css定义。有没有办法解决这个问题？另外，也许有更好的方法来对齐/显示旋转。

The deal is that css "margin: auto" doesn't produce expected animation and spinner widths for all elements should be defined via css. Is there are any way to solve this problem? Also, maybe there are better way to align/show spinners?

我应该使用按钮填充，使它的方式，其中按钮宽度不会改变，当微调器是显示还是按钮，改变宽度是确定？ （如果不是把它作为片段在某处）

And should i play with buttons padding and make it in way, where button width doesn't change, when spinner is shown or buttons that change width is ok? (If ill put it as snippet somewhere)

推荐答案

我能够通过使用max-width istead宽度来解决这个问题。这也是纯CSS解决方案，所以它可以使用几乎无处不在（例如显示X标记在标签上，当用户悬停鼠标在它，等）。

I was able to fix this problem by using max-width istead of width. Also this is pure CSS solution, so it can be used pretty much everywhere (for example show X mark on tags, when user hover mouse over it, etc).

演示： http://jsfiddle.net/AndrewDryga/GY6LC/

New CSS：

.spinner {
  display: inline-block;
  opacity: 0;
  max-width: 0;

  -webkit-transition: opacity 0.25s, max-width 0.45s; 
  -moz-transition: opacity 0.25s, max-width 0.45s;
  -o-transition: opacity 0.25s, max-width 0.45s;
  transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
}

这篇关于Spinner for Twitter Bootstrap .btn的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！