Twitter Bootstrap用スピナー.btn

Question

Twitter Bootstrapボタンのスピナーを作成しようとしています。スピナーは、進行中の作業（つまり、ajaxリクエスト）を示す必要があります。ここで

は小さな例です（jsfiddleのフル） http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML：

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：「doesnの：

.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; 
} 

取引はCSS "自動余裕" があることです期待されるアニメーションを生成し、すべての要素のスピナー幅をCSSで定義する必要があります。この問題を解決する方法はありますか？また、スピナーを整列/表示するにはより良い方法がありますか？

そして、私はボタンのパディングをして遊んでいなければなりません。どこにボタンの幅が変わらないのですか？スピナーが表示されているか、 （スニペットとしてどこかに入れたら）

Answer 1

この問題は、max-width istead of widthを使って解決できました。また、これは純粋なCSSソリューションなので、どこでも使用できます（たとえば、タグにXマークを表示する、ユーザーがマウスを上に置いたときなど）。

デモ：http://jsfiddle.net/AndrewDryga/GY6LC/

新しい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 */ 
} 

Answer 2

私はあなたのコードは、超便利であることが判明。私はそれが1年だったことを知っているが、私はコードを改善した。私は手動でspanとiタグを各要素に追加する必要はありませんでした。これらのタグを自動的に追加するためにJavaScriptコードを変更しました。ボタン/リンクにスピナーを追加するには、has-spinnerクラスを追加してdata-spinner = "[left | right]"タグを付けます（ボタンのテキストのどの側にスピナー配置する必要があります）。ここで

は修正JavaScriptのだ：

$(function(){ 

var spinnerHTML = "<span class='spinner'><i class='fa fa-refresh fa-spin'></i></span>", 
    spinnerObjects = $(".has-spinner"); 

spinnerObjects.filter("[data-spinner=left]").prepend(spinnerHTML + "&nbsp;") 
spinnerObjects.filter("[data-spinner=right]").append("&nbsp;" + spinnerHTML) 
spinnerObjects.click(function() { 
    $(this).toggleClass('active'); 
}); 

}）;

ここでのすべての変更（CSS、HTML）とフィドルへのリンクです：

http://jsfiddle.net/codyschouten/QKefn/2/

Answer 3

私は、（3.3.5）今、ブートストラップで最新のを使用するフォント素晴らしい@andrew-drygaソリューションを更新しましたが、 （4.3.0）、jquery（2.1.3）に変更して少し修正しました。

<button class="btn btn-success has-spinner"> 
    <i class="fa fa-spinner fa-spin"></i> 
    Foo 
</button> 

と

$('a.has-spinner, button.has-spinner').click(function() { 
    $(this).toggleClass('active'); 
}); 

と適切なCSSは、私は、これが唯一の変化であった

<i></i> 
with 
<em></em> 

から要素を変えた非常に簡単な解決策は、私のために働いた http://jsfiddle.net/oshybystyi/v04ag5ch/4/

Answer 4

を変更しますした。