Przyciski Twitter Bootstrap mają ładny Loading...
stan.
Chodzi o to, że po prostu pokazuje komunikat Loading...
przekazany przez data-loading-text
atrybut w następujący sposób:
<button type="button" class="btn btn-primary start" id="btnStartUploads"
data-loading-text="@Localization.Uploading">
<i class="icon-upload icon-large"></i>
<span>@Localization.StartUpload</span>
</button>
Patrząc na Font Awesome, widzisz, że jest teraz animowana ikona pokrętła .
Próbowałem zintegrować tę ikonę pokrętła podczas uruchamiania takiej Upload
operacji:
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
ale to nie miało żadnego wpływu, to znaczy, po prostu widzę Uploading...
tekst na przycisku.
Czy można dodać ikonę, gdy przycisk znajduje się w stanie Ładowanie? Wygląda na to, że Bootstrap po prostu usuwa ikonę <i class="icon-upload icon-large"></i>
wewnątrz przycisku, gdy znajduje się w stanie Ładowanie.
Oto proste demo, które pokazuje zachowanie, które opisałem powyżej. Jak widać, kiedy wchodzi w stan ładowania, ikona po prostu znika. Pojawia się ponownie po upływie określonego czasu.
źródło
Odpowiedzi:
Jeśli spojrzysz na źródło bootstrap-button.js , zobaczysz, że wtyczka bootstrap zastępuje wewnętrzny przycisk HTML tym, co jest w tekście podczas ładowania danych
$(myElem).button('loading')
.W twoim przypadku uważam , że powinieneś być w stanie to zrobić:
źródło
HTML
z tekstem we właściwości tagu. :-)data-loading-text
jest przestarzała od wersji 3.3.5 i zostanie usunięta w wersji 4.Proste rozwiązanie dla Bootstrap 3 z wykorzystaniem animacji CSS3.
Umieść następujące elementy w swoim CSS:
Następnie po prostu dodaj
spinning
klasęglyphicon
podczas ładowania, aby uzyskać ikonę wirowania:Na podstawie http://www.bootply.com/128062#
źródło
animation
i nie-animation
?animation
zamiast-animation
. Z tą zmianą dobrze dla mnie w FF i IE. Animacja firefox nie wygląda jednak bardzo gładko.Jest teraz pełnoprawna wtyczka do tego:
http://msurguy.github.io/ladda-bootstrap/
źródło
Aby rozwiązanie @flion wyglądało naprawdę świetnie, możesz dostosować punkt środkowy tej ikony, aby nie kołysał się w górę iw dół. Wygląda mi to na mały rozmiar czcionki:
źródło
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }
pracował dla mnie{ transform-origin: 50% 49%; }
rozwiąż w moim przypadku, w którymcog
zamiast tego używamOto moje rozwiązanie dla Bootstrap 4:
Sprawdź to na JSFiddle
źródło
Są moje, oparte na czystych animacjach SVG i CSS. Nie zwracaj uwagi na kod JS w poniższym fragmencie - służy on tylko do celów demonstracyjnych. Zapraszam do tworzenia własnych na podstawie moich, jest to bardzo łatwe.
Dostępne również na CodePen: https://codepen.io/anon/pen/PeRazr
źródło
Oto pełne rozwiązanie css zainspirowane Bulmą. Poprostu dodaj
źródło