អ្នកបង្វិល

បង្ហាញពីស្ថានភាពផ្ទុកនៃសមាសភាគ ឬទំព័រជាមួយ Bootstrap spinners ដែលបង្កើតឡើងទាំងស្រុងជាមួយ HTML, CSS និងគ្មាន JavaScript។

នៅលើទំព័រនេះ។

អំពី

Bootstrap "spinners" អាចត្រូវបានប្រើដើម្បីបង្ហាញស្ថានភាពផ្ទុកនៅក្នុងគម្រោងរបស់អ្នក។ ពួកវាត្រូវបានបង្កើតឡើងតែជាមួយ HTML និង CSS ប៉ុណ្ណោះ មានន័យថាអ្នកមិនត្រូវការ JavaScript ណាមួយដើម្បីបង្កើតវាទេ។ ទោះយ៉ាងណាក៏ដោយ អ្នកនឹងត្រូវការ JavaScript ផ្ទាល់ខ្លួនមួយចំនួន ដើម្បីបិទបើកលទ្ធភាពមើលឃើញរបស់ពួកគេ។ រូបរាង ការតម្រឹម និងទំហំរបស់ពួកគេអាចត្រូវបានប្ដូរតាមបំណងយ៉ាងងាយស្រួលជាមួយនឹងថ្នាក់ឧបករណ៍ប្រើប្រាស់ដ៏អស្ចារ្យរបស់យើង។

សម្រាប់គោលបំណងភាពងាយស្រួល កម្មវិធីផ្ទុកនីមួយៗនៅទីនេះរួមបញ្ចូល role="status"និងដាក់សំបុក <span class="visually-hidden">Loading...</span>។

ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motionសំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។

ឧបករណ៍បង្វិលព្រំដែន

ប្រើឧបករណ៍បង្វិលព្រំដែនសម្រាប់សូចនាករផ្ទុកទម្ងន់ស្រាល។

html

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ពណ៌

ឧបករណ៍បង្វិលព្រំដែនប្រើ currentColorសម្រាប់វា border-colorមានន័យថាអ្នកអាចប្ដូរពណ៌តាមបំណងដោយប្រើ ឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ ។ អ្នកអាចប្រើឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទណាមួយរបស់យើងនៅលើឧបករណ៍បង្វិលស្តង់ដារ។

html

<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

ប្រសិនបើអ្នកមិនចូលចិត្តឧបករណ៍បង្វិលព្រំដែនទេ សូមប្តូរទៅឧបករណ៍បង្វិលដែលលូតលាស់។ ខណៈដែលវាមិនបានបង្វិលតាមបច្ចេកទេស ក៏វាកើនឡើងដដែលៗ!

html

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ជាថ្មីម្តងទៀត ឧបករណ៍បង្វិលនេះត្រូវបានបង្កើតឡើងជាមួយ currentColorដូច្នេះអ្នកអាចផ្លាស់ប្តូររូបរាងរបស់វាបានយ៉ាងងាយស្រួលជាមួយនឹង ឧបករណ៍ប្រើប្រាស់ពណ៌អត្ថបទ ។ នៅទីនេះវាមានពណ៌ខៀវ រួមជាមួយនឹងវ៉ារ្យ៉ង់ដែលបានគាំទ្រ។

html

<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 ត្រូវបានបង្កើតឡើងដោយ rems, currentColorនិង display: inline-flex. នេះមានន័យថាពួកវាអាចផ្លាស់ប្តូរទំហំបានយ៉ាងងាយស្រួល ប្តូរពណ៌ និងតម្រឹមយ៉ាងឆាប់រហ័ស

រឹម

ប្រើ ឧបករណ៍ប្រើប្រាស់រឹម ដូចជា .m-5សម្រាប់គម្លាតងាយស្រួល។

html

<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ការដាក់

ប្រើ ឧបករណ៍ប្រើប្រាស់ flexbox ឧបករណ៍ប្រើប្រាស់ អ ណ្តែត ឬ ឧបករណ៍ តម្រឹមអត្ថបទ ដើម្បីដាក់ឧបករណ៍បង្វិល ឱ្យត្រង់កន្លែងដែលអ្នកត្រូវការវាក្នុងស្ថានភាពណាមួយ។

Flex

html

<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

កំពុងផ្ទុក...

html

<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

អណ្តែត

html

<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

តម្រឹមអត្ថបទ

html

<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

ទំហំ

បន្ថែម .spinner-border-smនិង .spinner-grow-smបង្កើតឧបករណ៍បង្វិលតូចជាងដែលអាចប្រើបានយ៉ាងរហ័សក្នុងផ្នែកផ្សេងទៀត។

html

<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 ផ្ទាល់ខ្លួន ឬរចនាប័ទ្មក្នុងបន្ទាត់ ដើម្បីផ្លាស់ប្តូរវិមាត្រតាមតម្រូវការ។

html

<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 ហើយប្រើអត្ថបទប៊ូតុងតាមតម្រូវការ។

html

<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>

html

<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>

CSS

អថេរ

បានបន្ថែមនៅក្នុង v5.2.0

ជាផ្នែកមួយនៃវិធីសាស្រ្តអថេរ CSS ដែលកំពុងវិវឌ្ឍន៍របស់ Bootstrap ឥឡូវនេះ អ្នកបង្វិលប្រើអថេរ CSS មូលដ្ឋាននៅលើ .spinner-borderនិង .spinner-growសម្រាប់ការកែលម្អតាមពេលវេលាជាក់ស្តែង។ តម្លៃសម្រាប់អថេរ CSS ត្រូវបានកំណត់តាមរយៈ Sass ដូច្នេះការប្ដូរតាមបំណង Sass នៅតែត្រូវបានគាំទ្រផងដែរ។

អថេរ spinner ព្រំដែន៖

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-border-width: #{$spinner-border-width};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-border;

ការរីកលូតលាស់អថេរ spinner:

  --#{$prefix}spinner-width: #{$spinner-width};
  --#{$prefix}spinner-height: #{$spinner-height};
  --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
  --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
  --#{$prefix}spinner-animation-name: spinner-grow;

សម្រាប់ spinners ទាំងពីរ ថ្នាក់កែប្រែ spinner តូចត្រូវបានប្រើដើម្បីធ្វើបច្ចុប្បន្នភាពតម្លៃនៃអថេរ CSS ទាំងនេះតាមតម្រូវការ។ ឧទាហរណ៍ .spinner-border-smថ្នាក់ធ្វើដូចខាងក្រោម៖

  --#{$prefix}spinner-width: #{$spinner-width-sm};
  --#{$prefix}spinner-height: #{$spinner-height-sm};
  --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};

អថេរ Sass

$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;
  }
}