ስፒነራት

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

ኣብዚ ገጽ

ብዝዕባ

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

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

ዝዓቢ ዘሎ ስፒነር

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

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>

ምምዳብ

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

ምትዕፅፃፍ

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>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ 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;

ንኽልቲኦም ስፒነር፡ ንኣሽቱ ስፒነር መቐየሪ ክፍልታት ንኽብርታት ናይዞም CSS ተቐያየርቲ ከም ኣድላይነቱ ንምዕራፍ ይጥቀሙ። ንኣብነት እቲ .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;

ቁልፊ ፍሬማት

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