in English

ސްޕިނަރުންނެވެ

މުޅިން އެޗްޓީއެމްއެލް، ސީއެސްއެސް، އަދި ޖާވާސްކްރިޕްޓެއް ނެތި ބިނާކޮށްފައިވާ ބޫޓްސްޓްރެޕް ސްޕިނަރސް އާއި އެކު ކޮމްޕޮނެންޓެއް ނުވަތަ ޕޭޖެއްގެ ލޯޑިންގ ސްޓޭޓް ދައްކާށެވެ.

މި ޞަފްޙާގައެވެ

ގުޅިގެން

ބޫޓްސްޓްރަޕް “ސްޕިނަރސް” ބޭނުންކޮށްގެން ތިބާގެ ޕްރޮޖެކްޓްތަކުގައި ލޯޑިންގ ސްޓޭޓް ދައްކާލެވޭނެއެވެ. އެއީ ހަމައެކަނި އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް އިން ބިނާކޮށްފައިވާ އެއްޗެހި ކަމުން މާނައަކީ އެތަކެތި އުފެއްދުމަށް އެއްވެސް ޖާވާސްކްރިޕްޓެއް ބޭނުން ނުވާނެ އެވެ. ނަމަވެސް އެމީހުންގެ ވިޒިބިލިޓީ ޓޮގްލް ކުރުމަށްޓަކައި ކޮންމެވެސް ކަސްޓަމް ޖާވާސްކްރިޕްޓެއް ބޭނުންވާނެއެވެ. އެމީހުންގެ ސިފައާއި، އެލައިންމަންޓާއި، ސައިޒިންގ އަޅުގަނޑުމެންގެ އަޖައިބު ކުރުވަނިވި ޔުޓިލިޓީ ކްލާސްތަކާއެކު ފަސޭހައިން ކަސްޓަމައިޒް ކުރެވޭނެއެވެ.

އެކްސެސިބިލިޓީގެ ބޭނުމުގައި، މިތަނުގައި ކޮންމެ ލޯޑަރެއްގައި ހިމެނެނީ 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}ޔުޓިލިޓީސް އިން އެކަން އޯވަރރައިޑް ކުރާނެއެވެ.

ބޮޑުވަމުން އަންނަ ސްޕިނަރ އެވެ

ބޯޑަރ ސްޕިނަރ އެއް ފެންސީ ނުވާނަމަ ގްރޯ ސްޕިނަރ އަށް ބަދަލުވާށެވެ. ޓެކްނިކަލީ އެނބުރޭ އެއްޗެއް ނޫން ނަމަވެސް، ތަކުރާރުކޮށް ބޮޑުވެއެވެ!

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>

އެލައިންމަންޓް

ބޫޓްސްޓްރެޕްގައި ސްޕިނަރތައް ބިލްޑް ކުރެވިފައިވަނީ rems، currentColor, އަދި display: inline-flexއިންނެވެ. މާނައަކީ ފަސޭހައިން އެތަކެތީގެ ސައިޒު ބަދަލުކޮށް، އަލުން ކުލަ ޖައްސައި، އަވަހަށް އެލައިން ކުރެވޭނެ އެވެ.

މާޖިން

ފަސޭހަ ސްޕޭސިންގ އަށް ކަހަލަ މާރޖިން ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ ..m-5

html އެވެ

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

ޕްލޭސްމަންޓް

ކޮންމެ ހާލަތެއްގައި ވެސް ސްޕިނަރުތައް ބޭނުންވާ ތަނުގައި ސީދާ ގޮތެއްގައި ބެހެއްޓުމަށް ފްލެކްސްބޮކްސް ޔުޓިލިޓީސް , ފްލޯޓް ޔުޓިލިޓީސް , ނުވަތަ ޓެކްސްޓް އެލައިންމަންޓް ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ .

ދަމާލުން

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>

ނުވަތަ، ބޭނުންވާ ގޮތަށް ޑިމައިންސް ބަދަލުކުރުމަށް ކަސްޓަމް ސީއެސްއެސް ނުވަތަ އިންލައިން ސްޓައިލްސް ބޭނުން ކުރާށެވެ.

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>

ބަޓަންތަކެވެ

މިހާރު ޕްރޮސެސް ކުރަމުންދާ ނުވަތަ ހިނގަމުންދާ ޢަމަލެއް އަންގައިދިނުމަށްޓަކައި ބަޓަންތަކުގެ ތެރޭގައި ސްޕިނަރސް ބޭނުންކުރުން. އަދި ސްޕިނަރ އެލިމެންޓުން ޓެކްސްޓް ސްވޮޕްކޮށް، ބޭނުންވާ ގޮތަށް ބަޓަން ޓެކްސްޓް ބޭނުންކުރެވިދާނެއެވެ.

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>

ސީއެސްއެސް އެވެ

ވެރިއޭބަލްސް އެވެ

v5.2.0 ގައި އިތުރުކޮށްފައިވެއެވެ

ބޫޓްސްޓްރެޕްގެ ތަރައްޤީވަމުން އަންނަ ސީއެސްއެސް ވެރިއޭބަލްސް އެޕްރޯޗްގެ ބައެއްގެ ގޮތުގައި، ސްޕިނަރުން މިހާރު ބޭނުންކުރަނީ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްސް އޮން .spinner-borderއެންޑް ....spinner-grow ރިއަލް ޓައިމް ކަސްޓަމައިޒޭޝަން އިތުރުކުރުމަށްސީއެސްއެސް ވެރިއޭބަލްތަކަށް ވެލިއުތައް ސެޓް ކުރެވެނީ ސާސް މެދުވެރިކޮށް ކަމުން ސާސް ކަސްޓަމައިޒޭޝަން އަދިވެސް ސަޕޯޓް ކުރެވެއެވެ.

ބޯޑަރ ސްޕިނަރ ވެރިއޭބަލްސް:

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

ބޮޑުވަމުން އަންނަ ސްޕިނަރ ވެރިއޭބަލްސް:

  --#{$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-border-smކްލާހުން ތިރީގައިވާ ކަންތައްތައް ކުރެއެވެ.

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

ސާސް ވެރިއޭބަލްސް އެވެ

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

ކީފްރޭމްސް އެވެ

އަޅުގަނޑުމެންގެ ސްޕިނަރުންނަށް ސީއެސްއެސް އެނިމޭޝަންތައް އުފެއްދުމަށް ބޭނުންކުރެއެވެ. ގައި ހިމެނޭ scss/_spinners.scss.

@keyframes spinner-border {
  to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
}

@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}