Os botões do Twitter Bootstrap têm um bom Loading...
estado disponível.
O fato é que apenas mostra uma mensagem como Loading...
passada através do data-loading-text
atributo desta forma:
<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>
Observando Font Awesome, você vê que agora existe um ícone giratório animado .
Tentei integrar esse ícone giratório ao disparar uma Upload
operação como esta:
$("#btnStartUploads").button('loading');
$("#btnStartUploads i").removeAttr('class');
$("#btnStartUploads i").addClass('icon-spinner icon-spin icon-large');
mas isso não teve efeito algum, ou seja, apenas vejo o Uploading...
texto no botão.
É possível adicionar um ícone quando o botão está no estado Carregando? Parece que, de alguma forma, o Bootstrap remove o ícone <i class="icon-upload icon-large"></i>
dentro do botão enquanto estiver no estado Carregando.
Aqui está uma demonstração simples que mostra o comportamento que descrevi acima. Como você vê quando entra no estado Carregando, o ícone simplesmente desaparece. Ele reaparece logo após o intervalo de tempo.