Spinner для Twitter Bootstrap .btn
Я пытаюсь создать спиннеры для кнопок Bootstrap в Twitter. Спиннеры должны указывать на некоторую работу в процессе (например, запрос ajax).
Вот небольшой пример:http://jsfiddle.net/AndrewDryga/zcX4h/1/
HTML (полный на jsfiddle):
Unknown element (no animation here!):
<p>
<span class="spinner"></span>
Foo
</p>
Works when width is defined:
<p>
<a class="btn btn-success has-spinner">
<span class="spinner"></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;
}
Дело в том, что CSSнаценка: авто " Безразлично»t производить ожидаемую анимацию, а ширину счетчика для всех элементов следует определять с помощью css. Есть ли способ решить эту проблему? Кроме того, возможно есть лучший способ выровнять / показать счетчики?
И я должен играть с кнопками и сделать так, чтобы ширина кнопки неизменить, когда показывается спиннер или кнопки, которые меняют ширину, в порядке? (Если заболел, положите его где-нибудь как фрагмент)