Посочете състоянието на зареждане на компонент или страница с Bootstrap spinners, изградени изцяло с HTML, CSS и без JavaScript.
относно
„Spinners“ на 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. Това означава, че те могат лесно да бъдат преоразмерени, преоцветени и бързо подравнени.
Добавете .spinner-border-smи .spinner-grow-sm, за да направите по-малък спинър, който може бързо да се използва в други компоненти.
Зареждане...
Зареждане...
Или използвайте персонализирани CSS или вградени стилове, за да промените размерите според нуждите.
Зареждане...
Зареждане...
Бутони
Използвайте въртящи се бутони, за да посочите, че в момента се обработва или се извършва действие. Можете също така да размените текста от въртящия се елемент и да използвате текста на бутона, ако е необходимо.