Чтобы добавить загрузчик в Bootstrap, вы можете использовать несколько методов. Вот несколько популярных подходов:
- Использование классов CSS: Bootstrap предоставляет встроенные классы CSS для загрузчиков. Вы можете использовать класс
spinner-border
для создания загрузчика счетчика или классprogress-bar
для создания загрузчика индикатора выполнения. Например:
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
- Использование JavaScript. Вы также можете добавить загрузчик динамически с помощью JavaScript. Bootstrap предоставляет компонент
modal
, который можно использовать в качестве наложения загрузчика. Вот пример:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
</div>
</div>
При необходимости можно использовать JavaScript для отображения и скрытия модального окна.
- Использование сторонних библиотек. Доступны различные сторонние библиотеки, предоставляющие более расширенные возможности загрузчика. Некоторые популярные варианты включают Spin.js, Loaders.css и Pace.js. Эти библиотеки предлагают широкий спектр стилей загрузчика и возможностей настройки.