ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

እሽክርክሪት

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

ስለ

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

ለተደራሽነት ዓላማዎች፣ እያንዳንዱ ጫኚ እዚህ ያካትታል role="status"እና ጎጆ <span class="visually-hidden">Loading...</span>.

የዚህ አካል አኒሜሽን ተጽእኖ prefers-reduced-motionበመገናኛ ብዙሃን ጥያቄ ላይ የተመሰረተ ነው. የእኛን የተደራሽነት ሰነድ የተቀነሰውን እንቅስቃሴ ክፍል ይመልከቱ ።

የድንበር ሽክርክሪት

ቀላል ክብደት ላለው የመጫኛ አመልካች የድንበር ስፒነሮችን ይጠቀሙ።

በመጫን ላይ...
<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

ቀለሞች

የድንበር ስፒነር ለሱ ይጠቀማል currentColor፣ ይህም ማለት ቀለሙን በፅሁፍ ቀለም መገልገያዎችborder-color ማበጀት ይችላሉ ። በመደበኛ ስፒነር ላይ ማንኛውንም የእኛን የጽሑፍ ቀለም መገልገያዎች መጠቀም ይችላሉ.

በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
<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}መገልገያዎች ያንን ይሽሩት።

በማደግ ላይ ያለው ሽክርክሪት

የድንበር እሽክርክሪት የማይፈልጉ ከሆነ፣ ወደ አድጋ ስፒነር ይቀይሩ። በቴክኒክ ባይሽከረከርም፣ በተደጋጋሚ ያድጋል!

በመጫን ላይ...
<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

በድጋሚ, ይህ ሽክርክሪት የተገነባው በ currentColor, ስለዚህ በቀላሉ በፅሁፍ መልክ መቀየር ይችላሉ መገልገያዎች . እዚህ በሰማያዊ ነው, ከሚደገፉት ልዩነቶች ጋር.

በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
በመጫን ላይ...
<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

በመጫን ላይ...
<div class="spinner-border m-5" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

አቀማመጥ

ፈትል ቦክስ መገልገያዎችንተንሳፋፊ መገልገያዎችን ወይም የጽሑፍ አሰላለፍ መገልገያዎችን በማንኛውም ሁኔታ ውስጥ በትክክል በሚፈልጉበት ቦታ ለማስቀመጥ ይጠቀሙ ።

ፍሌክስ

በመጫን ላይ...
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
በመጫን ላይ...
<div class="d-flex align-items-center">
  <strong>Loading...</strong>
  <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

ተንሳፋፊ

በመጫን ላይ...
<div class="clearfix">
  <div class="spinner-border float-end" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

የጽሑፍ አሰላለፍ

በመጫን ላይ...
<div class="text-center">
  <div class="spinner-border" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>

መጠን

አክል .spinner-border-smእና .spinner-grow-smበፍጥነት በሌሎች ክፍሎች ውስጥ ጥቅም ላይ ሊውል የሚችል ትንሽ ስፒነር ለመስራት።

በመጫን ላይ...
በመጫን ላይ...
<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 ወይም የመስመር ውስጥ ቅጦችን ይጠቀሙ።

በመጫን ላይ...
በመጫን ላይ...
<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>

አዝራሮች

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

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

ሳስ

ተለዋዋጮች

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