Руководство Bootstrap Spinner
1- Bootstrap Spinner
Вы можете использовать Bootstrap Spinner, чтобы отобразить статус скачивания (loading state) приложения, или любой другой процесс. Bootstrap Spinner построен только с HTML и CSS поэтому вам не понадобится jаvascript для его создания, но возможно вам понадобится немного jаvascript для управления его скрытия или отображенияСамый простой способ создания Spinner:
<!-- Spinner -->
<div class="spinner-border"></div>
Создайте Spinner подходящий устройству Screen Reader:
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
role = "status" | Оповещает устройство Screen Reader что этот элемент описывающий процесс (статус) работы. |
<span class="sr-only"> Loading... </span> | Это скрытый элемент в обычных устройствах, но он может быть найдет устройством Screen Reader. |
Loading...
Виды Spinner у Bootstrap:
Пример;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spinner Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h4 class="mb-4 mt-2">spinner-border</h4>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<h4 class="mb-4 mt-2">.spinner-grow</h4>
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
2- Spinner и Color
Используйте утилитарные классы Text Color вы можете установить цвета для Spinner.- .text-primary
- .text-secondary
- .text-success
- .text-danger
- .text-warning
- .text-info
- .text-light
- .text-dark
- .text-body
- .text-muted
- .text-white
- .text-black-50
- .text-white-50
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="sr-only">Loading...</span>
</div>
{banner_google}3- Размер Spinner
Добавьте класс .spinner-border-sm или .spinner-grow-sm в Spinner помогая его немного уменьшить, это нужно если вы хотите поставить ваш Spinner в определенный component, например Button.<div class="spinner-border spinner-border-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="sr-only">Loading...</span>
</div>
Добавьте класс .spinner-border-lg или .spinner-grow-lg в Spinner если вы хотите получить Spinner побольше.
<div class="spinner-border spinner-border-lg" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-lg" role="status">
<span class="sr-only">Loading...</span>
</div>
Вы так же можете кастомизировать размер Spinner через CSS:
<div class="spinner-border" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 5rem; height: 5rem;" role="status">
<span class="sr-only">Loading...</span>
</div>
4- Spinner в Button
Spinner можно поставить внутри Button или другого определенного компонента (component).<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
5- Placement
Используйте несколько утилитарных классов в Bootsrap для настройки позиции для Spinner:Пример кода:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spinner Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
.my-box {
height: 50px;
padding: 5px;
margin: 10px 0 5px 0;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container-fluid">
<h4>Flex</h4>
<div class="my-box d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="my-box d-flex align-items-center">
<span>Loading...</span>
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<h4>Float</h4>
<div class="my-box">
<div class="spinner-border float-right" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<h4>Text Align</h4>
<div class="my-box text-center">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS css CSS3 dle DLE fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Пользуетесь ли Вы облаком тегов