Кнопки Twitter Bootstrap имеют хорошее Loading...
состояние.
Дело в том, что он просто показывает сообщение, которое Loading...
прошло через data-loading-text
атрибут:
<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>
Глядя на Font 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>
внутри кнопки, находясь в состоянии загрузки.
Вот простая демонстрация, которая показывает поведение, которое я описал выше. Как вы видите, когда он входит в состояние загрузки, значок просто исчезает. Он появляется сразу после временного интервала.
источник
Ответы:
Если вы посмотрите на источник bootstrap-button.js , то увидите, что плагин bootstrap заменяет внутренний HTML - код кнопок тем, что находится в data-loading-text при вызове
$(myElem).button('loading')
.Для вашего случая, я думаю, вы должны просто сделать это:
источник
HTML
с текстом в свойстве тега. :-)data-loading-text
устарела с версии 3.3.5 и будет удалена с версии v4.Простое решение для Bootstrap 3 с использованием CSS3-анимации.
Поместите следующее в свой CSS:
Затем просто добавьте
spinning
класс воglyphicon
время загрузки, чтобы получить значок вращения:Основано на http://www.bootply.com/128062#
источник
animation
и нет-animation
?animation
вместо-animation
. С этим изменением хорошо в FF и IE для меня. Анимация Firefox выглядит не очень гладко, хотя.Теперь для этого есть полноценный плагин:
http://msurguy.github.io/ladda-bootstrap/
источник
Чтобы решение @flion выглядело действительно великолепно, вы можете отрегулировать центральную точку для этого значка, чтобы он не колебался вверх и вниз. Это выглядит правильно для меня при небольшом размере шрифта:
источник
.glyphicon-refresh.spinning { transform-origin: 50% 58%; }
работал для меня{ transform-origin: 50% 49%; }
решите в моем случае, где я используюcog
вместо этого.Вот мое решение для Bootstrap 4:
Проверьте это на JSFiddle
источник
Это мои, основанные на чистой SVG и CSS анимации. Не обращайте внимания на код JS во фрагменте ниже, это только для демонстрационных целей. Не стесняйтесь делать свои собственные, основываясь на моем, это очень легко.
Также доступно на CodePen: https://codepen.io/anon/pen/PeRazr
источник
Вот полное решение CSS, вдохновленное Bulma. Просто добавь
источник