button - poner - ¿Cómo agregar un ícono giratorio al botón cuando está en el estado Cargando?

label html

Question

Los botones de Twitter Bootstrap tienen un buen estado Loading... disponible.

Lo que sucede es que solo muestra un mensaje como Loading... pasa por el atributo de data-loading-text siguiente manera:

<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>

Al mirar Font Awesome, ves que ahora hay un ícono animado .

Traté de integrar ese ícono giratorio al disparar una operación de Upload como esta:

$("#btnStartUploads").button(''loading'');
$("#btnStartUploads i").removeAttr(''class'');
$("#btnStartUploads i").addClass(''icon-spinner icon-spin icon-large'');

pero esto no tuvo ningún efecto en absoluto, es decir, acabo de ver el texto Uploading... en el botón.

¿Es posible agregar un ícono cuando el botón está en estado Cargando? Parece que Bootstrap simplemente elimina el ícono <i class="icon-upload icon-large"></i> dentro del botón mientras está en estado Cargando.

Aquí hay una demo simple que muestra el comportamiento que describo arriba. Como ve cuando entra en el estado de carga, el ícono simplemente desaparece. Reaparece justo después del intervalo de tiempo.

Answer 1

Ahora hay un complemento completo para eso:

http://msurguy.github.io/ladda-bootstrap/

Answer 2

Aquí está mi solución para Bootstrap 4:

<button id="search" class="btn btn-primary" 
data-loading-text="<i class=''fa fa-spinner fa-spin fa-fw'' aria-hidden=''true''></i>Searching">
  Search
</button>

var setLoading = function () {
  var search = $(''#search'');
  if (!search.data(''normal-text'')) {
    search.data(''normal-text'', search.html());
  }
  search.html(search.data(''loading-text''));
};

var clearLoading = function () {
  var search = $(''#search'');
  search.html(search.data(''normal-text''));
};

setInterval(() => {
  setLoading();
  setTimeout(() => {
    clearLoading();
  }, 1000);
}, 2000);

Compruébalo en JSFiddle

Answer 3

Para que la solución de @flion se vea realmente genial, puedes ajustar el punto central de ese ícono para que no se tambalee hacia arriba o hacia abajo. Esto se ve bien para mí en un tamaño de letra pequeño:

.glyphicon-refresh.spinning {
  transform-origin: 48% 50%;
}

Answer 4

Si miras la fuente bootstrap-button.js , verás que el complemento bootstrap reemplaza los botones inner html con lo que está en data-loading-text cuando llamas $(myElem).button(''loading'') .

Para su caso, creo que debería poder hacer esto:

<button type="button"
        class="btn btn-primary start"
        id="btnStartUploads"
        data-loading-text="<i class=''icon-spinner icon-spin icon-large''></i> @Localization.Uploading">
    <i class="icon-upload icon-large"></i>
    <span>@Localization.StartUpload</span>
</button>

Answer 5

Solución simple para Bootstrap 3 usando animaciones CSS3.

Pon lo siguiente en tu CSS:

.glyphicon.spinning {
    animation: spin 1s infinite linear;
    -webkit-animation: spin2 1s infinite linear;
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg); }
    to { transform: scale(1) rotate(360deg); }
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

Luego, simplemente agregue la clase spinning a un glyphicon mientras carga para obtener su ícono giratorio:

<button class="btn btn-lg btn-warning">
    <span class="glyphicon glyphicon-refresh spinning"></span> Loading...    
</button>

Basado en http://www.bootply.com/128062#

• Nota: IE9 y versiones posteriores no admiten animaciones CSS3.