Означите стање учитавања компоненте или странице помоћу Боотстрап спинера, који су у потпуности направљени помоћу ХТМЛ-а, ЦСС-а и без ЈаваСцрипт-а.
О томе
Боотстрап „спиннери“ се могу користити за приказ стања учитавања у вашим пројектима. Направљени су само помоћу ХТМЛ-а и ЦСС-а, што значи да вам није потребан ЈаваСцрипт да бисте их креирали. Међутим, биће вам потребан неки прилагођени ЈаваСцрипт да бисте променили њихову видљивост. Њихов изглед, поравнање и величина могу се лако прилагодити нашим невероватним услужним класама.
У сврху приступачности, сваки учитавач овде укључује role="status"и угнежђени <span class="sr-only">Loading...</span>.
Бордер спиннер
Користите граничнике за лагани индикатор оптерећења.
Учитавање...
Боје
Бордер спиннер користи currentColorза своје border-color, што значи да можете прилагодити боју помоћу услужних програма за боју текста . Можете користити било који од наших услужних програма за боју текста на стандардном спинеру.
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Зашто не користите border-colorуслужне програме? Сваки граничник за окретање дефинише transparentграницу за најмање једну страну, тако да .border-{color}би услужни програми то превазишли.
Гровинг спиннер
Ако вам се не свиђа гранични спиннер, пређите на спинер за раст. Иако се технички не врти, стално расте!
Учитавање...
Још једном, овај спинер је направљен са currentColor, тако да можете лако да промените његов изглед помоћу услужних програма за боју текста . Овде је у плавој боји, заједно са подржаним варијантама.
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Учитавање...
Поравнање
Спинери у Боотстрапу су направљени са remс, currentColor, и display: inline-flex. То значи да се лако могу променити, променити боју и брзо поравнати.
Додајте .spinner-border-smи .spinner-grow-smда направите мањи спинер који се брзо може користити у другим компонентама.
Учитавање...
Учитавање...
Или користите прилагођене ЦСС или уграђене стилове да промените димензије по потреби.
Учитавање...
Учитавање...
Дугмад
Користите спинере унутар дугмади да бисте означили да се радња тренутно обрађује или одвија. Такође можете заменити текст из спинер елемента и користити текст дугмета по потреби.