Spinner dla Twittera Bootstrap .btn

Question

Próbuję tworzyć spinnery dla przycisków Bootstrap na Twitterze. Obrotnicy powinni wskazać niektóre prace w toku (np. Prośba ajaxowa).

Oto mały przykład: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (pełne 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; 
} 

Transakcja jest to, że css "margin: auto" robi” t wytworzyć oczekiwaną animację i szerokości przędzarki dla wszystkich elementów należy zdefiniować za pomocą css. Czy istnieje sposób na rozwiązanie tego problemu? Być może jest lepszy sposób na wyrównanie/pokazanie spinnerów?

A czy powinienem grać z wyściółką przycisków i robić to w miejscu, gdzie szerokość przycisku się nie zmienia, kiedy wyświetla się tarczy lub przyciski, które zmieniają szerokość jest dobra? (Jeśli źle umieścić go gdzieś w tym miejscu)

Answer 1

Udało mi się rozwiązać ten problem za pomocą szerokości maksymalnej szerokości. To także jest czyste rozwiązanie CSS, więc może być używane praktycznie wszędzie (na przykład pokaż znacznik X na znacznikach, gdy użytkownik najedzie myszą na niego, itp.).

Demo: 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 */ 
} 

Answer 2

znalazłem Twój kod będzie bardzo pomocne. Wiem, że minął rok, ale poprawiłem kod. Nie chciałem ręcznie dodawać znaczników span i i do każdego elementu. Poprawiłem kod JavaScript, aby automatycznie dodać te tagi. Więc wszystko co musisz zrobić, aby dodać spinner do przycisku/linku to dodaj do niego klasę has-spinner i nadaj mu tag-spinner = "[left | right]" (określa, która strona twojego przycisku tekstuje spinner powinno być umieszczone).

Oto zmodyfikowany 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'); 
}); 

});

Oto link do skrzypiec ze wszystkimi zmianami (CSS, HTML):

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

Answer 3

I zostały zaktualizowane @andrew-dryga rozwiązanie do używania Ostatnia teraz bootstrap (3.3.5), font-niesamowite (4.3.0), jquery (2.1.3) i nieznacznie zmodyfikował go.

np.

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

i

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

i właściwe css zmienia http://jsfiddle.net/oshybystyi/v04ag5ch/4/

Answer 4

Bardzo proste rozwiązanie pracował dla mnie zmieniał element z

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

była to jedyna zmiana, ja zrobił.