Spinner for Twitter Bootstrap.btn

Я пытаюсь создать прядильщиков для кнопок Twitter. Spinners должны указывать на какую-либо работу (т.е. Запрос ajax).

Вот небольшой пример: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (полный на 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;
}

Сделка заключается в том, что css "margin: auto" не создает ожидаемую анимацию, а ширину счетчика для всех элементов следует определять с помощью css. Есть ли способ решить эту проблему? Кроме того, может быть, есть лучший способ выровнять/показать прядильщики?

И должен ли я играть с добавлением кнопок и делать это в порядке, когда ширина кнопки не изменяется, когда отображается счетчик или кнопки, которые изменяют ширину в порядке? (Если это где-то плохое)

Ответы

Ответ 1

Мне удалось исправить эту проблему, используя max-width istead ширины. Также это чистое решение для 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 */
}

Ответ 2

Я обновил решение @andrew-dryga, чтобы использовать последнюю версию bootstrap (3.3.5), font-awesome (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 http://jsfiddle.net/oshybystyi/v04ag5ch/4/

Ответ 3

Я нашел ваш код очень полезным. Я знаю, что это был год, но я улучшил код. Мне не нравилось вручную добавлять теги span и я к каждому элементу. Я изменил код JavaScript, чтобы автоматически добавлять эти теги. Итак, все, что вам нужно сделать, чтобы добавить прядильщик к кнопке/ссылке, добавляет к нему класс-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/

Ответ 4

Очень простое решение для меня изменило элемент из

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

Это было единственное изменение, которое я сделал.