Как добавить значок счетчика к кнопке, когда он находится в состоянии загрузки?

Twitter кнопки Bootstrap хорошего Loading... государство доступен.

дело в том, что он просто показывает сообщение типа Loading... прошел такой:

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

глядя на шрифт Awesome, вы видите, что теперь есть анимированный значок спиннера.

Я попытался интегрировать этот значок спиннера при стрельбе Upload операции такой:

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

но это не имело никакого эффекта на все, то есть я просто вижу Uploading... текст на кнопке.

можно ли добавить значок, когда кнопка находится в состоянии загрузки? Похоже, как-то Bootstrap просто удаляет значок <i class="icon-upload icon-large"></i> внутри кнопки в состоянии загрузки.

вот простой демо это показывает поведение, которое я описал выше. Как вы видите, когда он входит в состояние загрузки значок просто исчезает. Он появляется сразу после временного интервала.

5 176
twitter-bootstrap back-button operator-overloading icons font-awesome

5 ответов:

Если вы посмотрите на bootstrap-кнопка.js Источник, вы увидите, что плагин bootstrap заменяет кнопки внутреннего html с тем, что находится в Data-loading-text при вызове $(myElem).button('loading').

для вашего случая, я думаю вы должны просто быть в состоянии сделать это:

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

простое решение Bootstrap 3 использование анимации CSS3.

поместите следующее в свой 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); }
}

тогда просто добавьте spinning класс В a glyphicon во время загрузки, чтобы получить свой значок спиннинг:

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

на основе http://www.bootply.com/128062#

  • Примечание: IE9 и ниже не поддерживают CSS3 анимации.
304

теперь есть полноценный плагин для этого:

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

65

чтобы решение от @flion выглядело действительно здорово, вы можете настроить центральную точку для этого значка, чтобы он не колебался вверх и вниз. Это выглядит правильно для меня при небольшом размере шрифта:

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

вот мое решение для 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);

С JSFiddle

1