Spinner per Twitter Bootstrap .btn

Question

Sto cercando di creare spinner per i pulsanti di avvio di Twitter. I filatori dovrebbero indicare alcuni lavori in corso (ad es. Richiesta di ajax).

Ecco piccolo esempio: http://jsfiddle.net/AndrewDryga/zcX4h/1/

HTML (completo su 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; 
} 

L'accordo è che css "margin: auto" doesn' t produrre l'animazione prevista e le larghezze degli spinner per tutti gli elementi dovrebbero essere definite tramite css. C'è un modo per risolvere questo problema? Inoltre, forse ci sono modi migliori per allineare/mostrare i filatori?

E dovrei giocare con i tasti imbottiti e farlo in modo, dove la larghezza del bottone non cambia, quando viene mostrato lo spinner oi pulsanti che cambiano la larghezza sono ok? (Se lo metto come snippet da qualche parte)

Answer 1

Sono stato in grado di risolvere questo problema utilizzando l'istanza di larghezza massima della larghezza. Anche questa è pura soluzione CSS, quindi può essere usata praticamente ovunque (ad esempio mostra il segno X sui tag, quando l'utente passa il mouse sopra di esso, ecc.).

Demo: http://jsfiddle.net/AndrewDryga/GY6LC/

Nuovo 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

Ho trovato il codice per essere super disponibile. So che è passato un anno ma ho migliorato il codice. Non mi piaceva dover aggiungere manualmente i tag span e i a ciascun elemento. Ho ottimizzato il codice JavaScript per aggiungere automaticamente questi tag. Quindi tutto quello che devi fare per aggiungere uno spinner a un pulsante/collegamento è aggiungere la classe has-spinner e assegnargli un tag di dati = "[left | right]" (determina quale lato del testo del tuo pulsante è il filatore dovrebbe essere posizionato).

Ecco il JavaScript modificato:

$(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'); 
}); 

});

Ecco il link per il violino con tutti i cambiamenti (CSS, HTML):

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

Answer 3

Ho aggiornato @andrew-dryga soluzione di utilizzare la lastest ormai bootstrap (3.3.5), font-awesome (4.3.0), jquery (2.1.3) e leggermente modificato.

ad es.

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

e

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

e appropriato css cambia http://jsfiddle.net/oshybystyi/v04ag5ch/4/

Answer 4

Molto semplice soluzione ha funzionato per me stava cambiando l'elemento da

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

Questo è stato l'unico cambiamento, mi fatto.