Толугу менен HTML, CSS менен курулган жана JavaScript жок Bootstrap спиннерлери менен компоненттин же беттин жүктөлүү абалын көрсөтүңүз.
Жөнүндө
Bootstrap "spinners" долбоорлоруңуздагы жүктөө абалын көрсөтүү үчүн колдонулушу мүмкүн. Алар 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 же саптык стилдерди колдонуңуз.
Жүктөлүүдө...
Жүктөлүүдө...
Buttons
Учурда иштетилип же болуп жаткан аракетти көрсөтүү үчүн баскычтардын ичиндеги спиннерлерди колдонуңуз. Сиз ошондой эле спиннер элементинен текстти алмаштырып, керек болсо баскычтын текстин колдонсоңуз болот.