እሽክርክሪት

ሙሉ በሙሉ በኤችቲኤምኤል፣ በሲኤስኤስ እና በጃቫ ስክሪፕት የተሰራውን የአንድ አካል ወይም ገጽ የመጫኛ ሁኔታ በBootstrap spinners ያመልክቱ።

በዚህ ገጽ ላይ

ስለ

በፕሮጀክቶችዎ ውስጥ የመጫኛ ሁኔታን ለማሳየት ቡትስትራክ "ስፒንነሮች" መጠቀም ይቻላል. እነሱ የተገነቡት በኤችቲኤምኤል እና በሲኤስኤስ ብቻ ነው፣ ይህ ማለት እነሱን ለመፍጠር ምንም ጃቫ ስክሪፕት አያስፈልገዎትም። ታይነታቸውን ለመቀየር ግን አንዳንድ ብጁ ጃቫ ስክሪፕት ያስፈልግዎታል። መልካቸው፣ አሰላለፍ እና መጠናቸው በአስደናቂው የፍጆታ ክፍሎቻችን በቀላሉ ሊበጁ ይችላሉ።

ለተደራሽነት ዓላማዎች፣ እያንዳንዱ ጫኚ እዚህ ያካትታል 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>

አሰላለፍ

በ Bootstrap ውስጥ ያሉት ስፒነሮች በ 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>

ወይም፣ እንደ አስፈላጊነቱ መጠኖቹን ለመቀየር ብጁ 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>

አዝራሮች

አንድ ድርጊት በአሁኑ ጊዜ እየተካሄደ ወይም እየተካሄደ መሆኑን ለማመልከት በአዝራሮች ውስጥ ስፒኖችን ይጠቀሙ። እንዲሁም ጽሑፉን ከስፒንነር ኤለመንት መለዋወጥ እና እንደ አስፈላጊነቱ የአዝራር ጽሁፍ መጠቀም ይችላሉ።

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 ተለዋዋጮች አቀራረብ አካል፣ ሾጣኞች አሁን ለተሻሻለ ቅጽበታዊ ማበጀት የአካባቢያዊ CSS ተለዋዋጮችን .spinner-borderይጠቀማሉ ። .spinner-growየCSS ተለዋዋጮች እሴቶች በ 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;

የሚያድጉ የአከርካሪ ተለዋዋጮች፡-

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

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;

የቁልፍ ፍሬሞች

ለስፖንሰሮቻችን የሲኤስኤስ እነማዎችን ለመፍጠር ይጠቅማል። ውስጥ ተካትቷል scss/_spinners.scss።

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

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