អ្នកបង្វិល
ចង្អុលបង្ហាញស្ថានភាពផ្ទុកនៃសមាសភាគ ឬទំព័រជាមួយ Bootstrap spinners ដែលបង្កើតឡើងទាំងស្រុងជាមួយ HTML, CSS និងគ្មាន JavaScript ។
អំពី
Bootstrap "spinners" អាចត្រូវបានប្រើដើម្បីបង្ហាញស្ថានភាពផ្ទុកនៅក្នុងគម្រោងរបស់អ្នក។ ពួកវាត្រូវបានបង្កើតឡើងតែជាមួយ HTML និង CSS ប៉ុណ្ណោះ មានន័យថាអ្នកមិនត្រូវការ JavaScript ណាមួយដើម្បីបង្កើតវាទេ។ ទោះយ៉ាងណាក៏ដោយ អ្នកនឹងត្រូវការ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន ដើម្បីបិទបើកលទ្ធភាពមើលឃើញរបស់ពួកគេ។ រូបរាង ការតម្រឹម និងទំហំរបស់ពួកគេអាចត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដ៏អស្ចារ្យរបស់យើង។
សម្រាប់គោលបំណងភាពងាយស្រួល ឧបករណ៍ផ្ទុកនីមួយៗនៅទីនេះរួមបញ្ចូល role="status"
និងដាក់សំបុក <span class="visually-hidden">Loading...</span>
។
prefers-reduced-motion
សំណួរមេឌៀ។ សូមមើល
ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។
ឧបករណ៍បង្វិលព្រំដែន
ប្រើឧបករណ៍បង្វិលព្រំដែនសម្រាប់សូចនាករផ្ទុកទម្ងន់ស្រាល។
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ពណ៌
ឧបករណ៍បង្វិលព្រំដែនប្រើ currentColor
សម្រាប់វា border-color
មានន័យថាអ្នកអាចប្ដូរពណ៌តាមបំណងដោយប្រើ ឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ ។ អ្នកអាចប្រើឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទណាមួយរបស់យើងនៅលើឧបករណ៍បង្វិលស្តង់ដារ។
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
border-color
ឧបករណ៍ប្រើប្រាស់? ឧបករណ៍បង្វិលព្រំដែននីមួយៗកំណត់ព្រំដែន
transparent
យ៉ាងហោចណាស់មួយចំហៀង ដូច្នេះ
.border-{color}
ឧបករណ៍ប្រើប្រាស់នឹងបដិសេធវា។
ការរីកលូតលាស់ spinner
ប្រសិនបើអ្នកមិនចូលចិត្តឧបករណ៍បង្វិលព្រំដែនទេ សូមប្តូរទៅឧបករណ៍បង្វិលដែលលូតលាស់។ ខណៈដែលវាមិនបានបង្វិលតាមបច្ចេកទេស ក៏វាកើនឡើងដដែលៗ!
<div class="spinner-grow" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ជាថ្មីម្តងទៀត ឧបករណ៍បង្វិលនេះត្រូវបានបង្កើតឡើងជាមួយ currentColor
ដូច្នេះអ្នកអាចផ្លាស់ប្តូររូបរាងរបស់វាបានយ៉ាងងាយស្រួលជាមួយនឹង ឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ ។ នៅទីនេះវាមានពណ៌ខៀវ រួមជាមួយនឹងវ៉ារ្យ៉ង់ដែលបានគាំទ្រ។
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ការតម្រឹម
Spinners នៅក្នុង Bootstrap ត្រូវបានបង្កើតឡើងដោយ rem
s, currentColor
និង display: inline-flex
. នេះមានន័យថាពួកវាអាចផ្លាស់ប្តូរទំហំបានយ៉ាងងាយស្រួល ប្តូរពណ៌ និងតម្រឹមយ៉ាងឆាប់រហ័ស
រឹម
ប្រើ ឧបករណ៍ប្រើប្រាស់រឹម ដូចជា .m-5
សម្រាប់គម្លាតងាយស្រួល។
<div class="spinner-border m-5" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ការដាក់
ប្រើ ឧបករណ៍ប្រើប្រាស់ flexbox ឧបករណ៍ប្រើប្រាស់ អ ណ្តែត ឬ ឧបករណ៍ តម្រឹមអត្ថបទ ដើម្បីដាក់ឧបករណ៍បង្វិល ឱ្យត្រង់កន្លែងដែលអ្នកត្រូវការវាក្នុងស្ថានភាពណាមួយ។
Flex
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div class="d-flex align-items-center">
<strong>Loading...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
អណ្តែត
<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
តម្រឹមអត្ថបទ
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
ទំហំ
បន្ថែម .spinner-border-sm
និង .spinner-grow-sm
បង្កើតឧបករណ៍បង្វិលតូចជាងដែលអាចប្រើបានយ៉ាងរហ័សក្នុងផ្នែកផ្សេងទៀត។
<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ឬប្រើ CSS ផ្ទាល់ខ្លួន ឬរចនាប័ទ្មក្នុងបន្ទាត់ ដើម្បីផ្លាស់ប្តូរវិមាត្រតាមតម្រូវការ។
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">Loading...</span>
</div>
ប៊ូតុង
ប្រើឧបករណ៍បង្វិលក្នុងប៊ូតុង ដើម្បីបង្ហាញថាសកម្មភាពមួយកំពុងដំណើរការ ឬកំពុងកើតឡើង។ អ្នកក៏អាចប្តូរអត្ថបទចេញពីធាតុ spinner ហើយប្រើអត្ថបទប៊ូតុងតាមតម្រូវការ។
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">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>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Loading...
</button>
សាស
អថេរ
$spinner-width: 2rem;
$spinner-height: $spinner-width;
$spinner-vertical-align: -.125em;
$spinner-border-width: .25em;
$spinner-animation-speed: .75s;
$spinner-width-sm: 1rem;
$spinner-height-sm: $spinner-width-sm;
$spinner-border-width-sm: .2em;
ស៊ុមគន្លឹះ
ប្រើសម្រាប់បង្កើតចលនា CSS សម្រាប់អ្នកបង្វិលរបស់យើង។ រួមបញ្ចូលក្នុង scss/_spinners.scss
។
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}
@keyframes spinner-grow {
0% {
transform: scale(0);
}
50% {
opacity: 1;
transform: none;
}
}