ምዕባለ

ንዝተደራረቡ ባር፣ ተንቀሳቓሲ ድሕረ ባይታታትን ናይ ጽሑፍ ስያመታትን ደገፍ ዘለዎም ናይ ቡትስትራፕ ብሕታዊ ምዕባለ ባር ንምጥቃም ዝሕግዙ ሰነዳትን ኣብነታትን።

ኣብዚ ገጽ

ከመይ ይሰርሕ

ናይ ምዕባለ ኣካላት ብኽልተ HTML ባእታታት ይህነጹ፣ ገለ CSS ስፍሓት ንምቕማጥ፣ ከምኡውን ውሑዳት ባህርያት። ንሕና HTML5 <progress>element ኣይንጥቀመሉን ኢና ፣ ንገስጋስ ባር ክትድምር፣ ህያው ክትገብረሎምን ኣብ ልዕሊኦም ናይ ጽሑፍ ስያመታት ከተቐምጥን ከም እትኽእል ነረጋግጽ።

ነቲ as a wrapper ንጥቀመሉ .progressmax value ናይቲ progress bar ንምምልካት።
.progress-barክሳብ ሕዚ ዘሎ ምዕባለ ንምምልካት ውሽጣዊ ንጥቀመሉ ።
እቲ .progress-barስፍሓቶም ንምቕማጥ ናይ ውሽጢ መስመር ቅዲ፣ ዩቲሊቲ ክፍሊ ወይ ብሕታዊ CSS ይሓትት።
እቲ ውን ተበጻሒ ንምግባር .progress-barገለን ባህርያትን ይሓትት role።aria

ነዚ ኩሉ ብሓባር ኣቐምጦ እሞ እዞም ዝስዕቡ ኣብነታት ኣለዉኻ።

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ቡትስትራፕ ስፍሓት ንምቕማጥ ብኣጻብዕ ዝቑጸሩ ዩቲሊቲታት ይህብ ። እዚኦም ከከም ድሌታትካ ንገስጋስ ብቕልጡፍ ኣብ ምውቃር ክሕግዙ ይኽእሉ እዮም።

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ስያመታት

ኣብ ውሽጢ .progress-bar.

25%

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

ቁመት

heightኣብቲ ጥራይ ኢና ዋጋ ነቐምጥ .progress፣ ስለዚ ነቲ ዋጋ እንተቐይርካዮ እቲ ውሽጣዊ .progress-barብኣውቶማቲክ ብኡ መሰረት ዓቐኑ ክቕይር እዩ።

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ድሕረ ባይታታት

መልክዕ ውልቃዊ ምዕባለ ባር ንምቕያር ድሕረ ባይታ ዩቲሊቲ ክፍልታት ተጠቐም።

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ብዙሓት ባር

ኣድላዪ እንተኾይኑ ኣብ ሓደ ናይ ምዕባለ ክፍሊ ብዙሓት ናይ ምዕባለ ባር ኣካትት።

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ስሪት ዘለዎ

ብመንገዲ CSS gradient ኣብ ልዕሊ ሕብሪ ድሕረ ባይታ ናይቲ ናይ ምዕባለ ባር መስመር ንምትግባር .progress-bar-stripedናብ ዝኾነ ወስኹ ።.progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

ተንቀሳቓሲ መስመራት።

እቲ ስሪት ዘለዎ ግራድየንት እውን ተንቀሳቓሲ ክኸውን ይኽእል እዩ። ብመንገዲ CSS3 ተንቀሳቓሲ ስእልታት ነቶም መስመራት ካብ የማን ናብ ጸጋም ንኽንቀሳቐሱ ናብ .progress-bar-animatedምውሳኽ ።.progress-bar

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

ሳስ

ተለዋዋጢ ረቛሒታት

$progress-height:                   1rem;
$progress-font-size:                $font-size-base * .75;
$progress-bg:                       $gray-200;
$progress-border-radius:            $border-radius;
$progress-box-shadow:               $box-shadow-inset;
$progress-bar-color:                $white;
$progress-bar-bg:                   $primary;
$progress-bar-animation-timing:     1s linear infinite;
$progress-bar-transition:           width .6s ease;

ቁልፊ ፍሬማት

ን CSS ኣኒሜሽን ንምፍጣር ዝውዕል .progress-bar-animated. ኣብ scss/_progress-bar.scss.

@if $enable-transitions {
  @keyframes progress-bar-stripes {
    0% { background-position-x: $progress-height; }
  }
}