Как добавить значок spinner к кнопке, когда он находится в состоянии загрузки?
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, вы видите, что теперь есть анимированный значок spinner.
Я попытался интегрировать этот значок spinner при стрельбе 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 ответов
Если вы посмотрите на bootstrap-кнопка.js Источник, вы увидите, что плагин bootstrap заменяет кнопки внутреннего html с тем, что находится в загрузка данных-текст при вызове $(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>
простое решение 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
класс glyphicon
во время загрузки, чтобы получить вращающийся значок:
<button class="btn btn-lg btn-warning">
<span class="glyphicon glyphicon-refresh spinning"></span> Loading...
</button>
на основе http://www.bootply.com/128062#
- Примечание: IE9 и ниже не поддерживают анимации CSS3.
чтобы решение @flion выглядело действительно здорово, вы можете настроить центральную точку для этого значка, чтобы он не колебался вверх и вниз. Это выглядит правильно для меня при небольшом размере шрифта:
.glyphicon-refresh.spinning {
transform-origin: 48% 50%;
}
вот мое решение для 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