ስፒነራት

ምሉእ ብምሉእ ብኤችቲኤምኤል፣ ሲኤስኤስን ጃቫስክሪፕትን ዘይብሉን ዝተሃንጸ ቡትስትራፕ ስፒነርስ ዘለዎ ናይ ሓደ ኣካል ወይ ገጽ ናይ ምጽዓን ኩነታት ኣመልክት።

ኣብዚ ገጽ

ብዝዕባ

ቡትስትራፕ “ስፒነርስ” ኣብ ፕሮጀክትታትካ ናይ ምጽዓን ኩነታት ንምርኣይ ክጥቀሙ ይኽእሉ። ብኤችቲኤምኤልን ሲኤስኤስን ጥራይ ዝተሃንጹ ኮይኖም፡ ንምፍጣሮም ዝኾነ ጃቫስክሪፕት ኣየድልየካን እዩ። ርኡይነቶም ንምቕያር ግን ገለ ብሕታዊ ጃቫስክሪፕት ከድልየካ እዩ። መልክዖምን ኣሰላልፋኦምን ዓቐኖምን ብቐሊሉ ምስቶም ዘገርሙ ናይ ዩቲሊቲ ክፍልታትና ክትመዓራረ ትኽእል ኢኻ።

ንዕላማታት ተበጻሕነት፡ ነፍሲ ወከፍ ሎደር ኣብዚ ዘጠቓልልን 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}ዩቲሊቲታት ነዚ ምተሸፈኑ።

ዝዓቢ ዘሎ ስፒነር

ዶብ ስፒነር እንተዘይፈቲኻ ናብቲ grow ስፒነር ቀይር። ብቴክኒካዊ መዳይ እኳ እንተዘይተዘዋወረ ብተደጋጋሚ ግን ይዓቢ!

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

ኣሰላልፋ

ኣብ ቡትስትራፕ ዝርከቡ ስፒነራት ብ rems, currentColor, ከምኡውን display: inline-flex. እዚ ማለት ብቐሊሉ ዓቐኖም ክቕይሩን ዳግማይ ሕብሪ ክቕየሩን ብቕልጡፍ ክስርዑን ይኽእሉ።

ወሰን

ከም ንቐሊል ርሕቀት ዝኸውን ናይ ወሰን ዩቲሊቲታት ተጠቐም ።.m-5

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

ምምዳብ

ኣብ ዝኾነ ኩነታት ስፒነራት ብልክዕ ኣብቲ ዘድልየካ ቦታ ንምቕማጥ flexbox utilities , float utilities , ወይ ጽሑፍ ኣሰላልፋ ዩቲሊቲስ ተጠቐም ።

ምትዕፅፃፍ

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

ቁልፊ ፍሬማት

ንናይ ስፒነራትና ዝኸውን ናይ 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;
  }
}