in English

អ្នកបង្វិល

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

អំពី

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

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

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

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

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

កំពុង​ផ្ទុក...
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

ពណ៌

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

កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
ហេតុអ្វីមិនប្រើ border-colorឧបករណ៍ប្រើប្រាស់? ឧបករណ៍បង្វិលព្រំដែននីមួយៗកំណត់ព្រំដែន transparentយ៉ាងហោចណាស់មួយចំហៀង ដូច្នេះ .border-{color}ឧបករណ៍ប្រើប្រាស់នឹងបដិសេធវា។

ការរីកលូតលាស់ spinner

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

កំពុង​ផ្ទុក...
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>

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

កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>

ការតម្រឹម

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

រឹម

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

កំពុង​ផ្ទុក...
<div class="spinner-border m-5" role="status">
  <span class="sr-only">Loading...</span>
</div>

ការដាក់

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

Flex

កំពុង​ផ្ទុក...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>
កំពុង​ផ្ទុក...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>

អណ្តែត

កំពុង​ផ្ទុក...
<div class="clearfix">
  <div class="spinner-border float-right" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

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

កំពុង​ផ្ទុក...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">Loading...</span>
  </div>
</div>

ទំហំ

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

កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>

ឬប្រើ CSS ផ្ទាល់ខ្លួន ឬរចនាប័ទ្មក្នុងបន្ទាត់ ដើម្បីផ្លាស់ប្តូរវិមាត្រតាមតម្រូវការ។

កំពុង​ផ្ទុក...
កំពុង​ផ្ទុក...
<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
  <span class="sr-only">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="sr-only">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="sr-only">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>