လှည့်စားသူများ

HTML၊ CSS နှင့် JavaScript လုံးဝမပါဝင်သည့် Bootstrap spinners ဖြင့် အစိတ်အပိုင်းတစ်ခု သို့မဟုတ် စာမျက်နှာ၏ ဖွင့်ခြင်းအခြေအနေကို ညွှန်ပြပါ။

ဤစာမျက်နှာတွင်

အကြောင်း

သင့်ပရောဂျက်များရှိ loading အခြေအနေကိုပြသရန် Bootstrap “spinners” ကိုသုံးနိုင်သည်။ ၎င်းတို့ကို HTML နှင့် CSS ဖြင့်သာ တည်ဆောက်ထားသောကြောင့် ၎င်းတို့ကို ဖန်တီးရန် JavaScript မလိုအပ်ပါ။ သို့သော် ၎င်းတို့၏ မြင်နိုင်စွမ်းကို ပြောင်းရန်အတွက် သင်သည် စိတ်ကြိုက် JavaScript အချို့ကို လိုအပ်မည်ဖြစ်သည်။ ၎င်းတို့၏ အသွင်အပြင်၊ ချိန်ညှိမှုနှင့် အရွယ်အစားတို့ကို ကျွန်ုပ်တို့၏ အံ့သြဖွယ် အသုံးဝင်မှုအတန်းများဖြင့် အလွယ်တကူ စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါသည်။

အများသုံးစွဲနိုင်မှု ရည်ရွယ်ချက်များအတွက်၊ ဤနေရာတွင် loader တစ်ခုစီတွင် role="status"အသိုက်အမြုပ်တစ်ခု ပါဝင်သည် <span class="visually-hidden">Loading...</span>။

ဤအစိတ်အပိုင်း၏ ကာတွန်းအကျိုးသက်ရောက်မှုသည် prefers-reduced-motionမီဒီယာမေးမြန်းမှုအပေါ် မူတည်ပါသည်။ ကျွန်ုပ်တို့၏ဝင်ရောက်နိုင်မှုမှတ်တမ်း၏ လျှော့ချထားသောရွေ့လျားမှုအပိုင်းကို ကြည့်ပါ ။

နယ်စပ်လှည့်ပတ်

ပေါ့ပါးသော loading indicator အတွက် နယ်နိမိတ်လှည့်စက်များကို အသုံးပြုပါ။

html

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

အရောင်များ

border spinner သည် currentColor၎င်းအတွက် အသုံးပြုသည်၊ ဆိုလိုသည်မှာ သင်သည် စာသားအရောင် utilities များborder-color ဖြင့် အရောင်ကို စိတ်ကြိုက်ပြင်ဆင်နိုင်သည် ။ ကျွန်ုပ်တို့၏ စာသားအရောင်အသုံးအဆောင်များကို စံ spinner ပေါ်တွင် သင်အသုံးပြုနိုင်ပါသည်။

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>

တစ်ဖန်၊ ဤ spinner ဖြင့်တည်ဆောက်ထားသည် ၊ ထို့ကြောင့် သင်သည် စာသားအရောင်အသုံးအဆောင်များ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>

တန်းညှိခြင်း။

Bootstrap ရှိ Spinner များကို rems၊ currentColorနှင့် တည်ဆောက်ထားသည် display: inline-flex။ ဆိုလိုသည်မှာ ၎င်းတို့ကို အလွယ်တကူ အရွယ်အစားပြောင်းလဲခြင်း၊ အရောင်ပြန်ခြယ်ခြင်းနှင့် လျင်မြန်စွာ ချိန်ညှိနိုင်သည်။

အနားသတ်

လွယ်ကူသောအကွာအဝေးအတွက် ကဲ့သို့သော အနားသတ်အသုံးအဆောင်များ ကိုသုံး ပါ။.m-5

html

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

နေရာချထားခြင်း။

မည်သည့်အခြေအနေတွင်မဆို spinner များကို သင်လိုအပ်သည့်နေရာတွင် နေရာချရန် flexbox utilities ၊ float utilities သို့မဟုတ် text alignment utilities ကိုသုံးပါ။

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 တွင် ထည့်သွင်းထားသည်။

Bootstrap ၏ တိုးတက်ပြောင်းလဲလာသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ spinners များသည် ယခုအခါတွင် local CSS variables များကို အသုံးပြုပြီး အချိန် .spinner-borderနှင့် .spinner-growတပြေးညီ စိတ်ကြိုက်ပြင်ဆင်ခြင်းအတွက် ပိုမိုကောင်းမွန်လာပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို Sass မှတစ်ဆင့် သတ်မှတ်ပေးထားသောကြောင့် Sass စိတ်ကြိုက်ပြင်ဆင်ခြင်းကိုလည်း ပံ့ပိုးထားပါသည်။

နယ်ခြားလှည့်ပတ်ကိန်းရှင်များ-

  --#{$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 variable များ-

  --#{$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;

spinner နှစ်ခုစလုံးအတွက်၊ လိုအပ်သလို လိုအပ်သလို ဤ CSS variable များ၏ တန်ဖိုးများကို အပ်ဒိတ်လုပ်ရန်အတွက် အသေးစား spinner modifier အတန်းများကို အသုံးပြုပါသည်။ ဥပမာအားဖြင့်၊ .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;
  }
}