Пакажыце стан загрузкі кампанента або старонкі з дапамогай круцёлак Bootstrap, цалкам створаных з HTML, CSS і без JavaScript.
Аб
«Спінеры» Bootstrap можна выкарыстоўваць, каб паказаць стан загрузкі ў вашых праектах. Яны створаны толькі з дапамогай HTML і CSS, гэта значыць, што для іх стварэння вам не патрэбны JavaScript. Аднак вам спатрэбіцца карыстальніцкі JavaScript, каб пераключыць іх бачнасць. Іх знешні выгляд, выраўноўванне і памер можна лёгка наладзіць з дапамогай нашых дзіўных класаў карыснасці.
У мэтах даступнасці кожны загрузнік тут уключае ў сябе role="status"ўкладзены <span class="sr-only">Loading...</span>.
Бардзюрны спінер
Для індыкатара лёгкай загрузкі выкарыстоўвайце бардзюры.
Загрузка...
Колеры
Спінкер мяжы выкарыстоўвае currentColorдля свайго border-color, што азначае, што вы можаце наладзіць колер з дапамогай утыліт колеру тэксту . Вы можаце выкарыстоўваць любую з нашых утыліт колеру тэксту на стандартным круцёлцы.
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Чаму б не скарыстацца border-colorўтылітамі? Кожная граніца вызначае transparentмяжу як мінімум для аднаго боку, таму .border-{color}ўтыліты адмяняюць гэта.
Расце блешня
Калі вам не падабаецца бардзюрны спінер, пераключыцеся на растучы спінер. Хоць тэхнічна ён не круціцца, ён пастаянна расце!
Загрузка...
Зноў жа, гэты спінер створаны з дапамогай currentColor, так што вы можаце лёгка змяніць яго знешні выгляд з дапамогай утыліт колеру тэксту . Вось ён сіняга колеру разам з падтрымоўванымі варыянтамі.
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Загрузка...
Выраўноўванне
Спінеры ў Bootstrap створаны з дапамогай rems currentColor, і display: inline-flex. Гэта азначае, што іх можна лёгка змяніць памер, перафарбаваць і хутка выраўнаваць.
Маржа
Выкарыстоўвайце ўтыліты палёў , напрыклад, .m-5для лёгкага інтэрвалу.
Дадайце .spinner-border-smі .spinner-grow-sm, каб зрабіць меншы спінер, які можна хутка выкарыстоўваць у іншых кампанентах.
Загрузка...
Загрузка...
Або выкарыстоўвайце карыстальніцкі CSS або ўбудаваныя стылі, каб змяніць памеры па меры неабходнасці.
Загрузка...
Загрузка...
Гузікі
Выкарыстоўвайце круцёлкі ўнутры кнопак, каб паказаць дзеянне, якое зараз апрацоўваецца або адбываецца. Вы таксама можаце памяняць тэкст з элемента спінера і пры неабходнасці выкарыстоўваць тэкст кнопкі.