Ndzima

Matsalwa na swikombiso swo tirhisa tibara ta nhluvuko ta ntolovelo ta Bootstrap leti kombisaka nseketelo wa tibara leti hlanganisiweke, swifaniso swa le ndzhaku leswi hanyaka, na malebvu ya matsalwa.

Eka tluka leri

Ndlela leyi swi tirhaka ha yona

Swiphemu swa nhluvuko swi akiwile hi swiaki swimbirhi swa HTML, swin’wana swa CSS ku veka ku anama, na swihlawulekisi swi nga ri swingani. A hi tirhisi elemente ya HTML5<progress> , hi tiyisisa leswaku u nga hlanganisa tibara ta nhluvuko, u ti endla ti hanya, na ku veka malebvu ya matsalwa ehenhla ka tona.

Hi tirhisa .progressas a wrapper ku kombisa max value ya progress bar.
Hi tirhisa swa le ndzeni .progress-barku kombisa nhluvuko ku fikela sweswi.
The .progress-baryi lava xitayili xa le ndzeni ka layini, tlilasi ya vukorhokeri, kumbe CSS ya ntolovelo ku veka ku anama ka vona.
The .progress-baryi tlhela yi lava swin’wana rolena ariaswihlawulekisi ku endla leswaku yi fikeleleka.

Hlanganisa sweswo hinkwaswo swin’we, kutani u ni swikombiso leswi landzelaka.

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

Bootstrap yi nyika switirhisiwa swo hlayanyana swo veka ku anama . Ku ya hi swilaveko swa wena, leswi swi nga pfuna eku hleleni ka nhluvuko hi ku hatlisa.

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

Tilebhele

Engetelani malebvu eka tibara ta wena ta nhluvuko hi ku veka tsalwa endzeni ka .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>

Ku leha

Hi veka ntsena heightntikelo eka .progress, kutani loko u cinca ntikelo wolowo wa le ndzeni .progress-barwu ta cinca mpimo hi woxe hi ku ya hi sweswo.

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

Swifaniso swa le ndzhaku

Tirhisa titlilasi ta vukorhokeri bya le ndzhaku ku cinca ku languteka ka tibara ta nhluvuko ha yin’we.

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

Tibara to tala

Katsa tibara to tala ta nhluvuko eka xiphemu xa nhluvuko loko u swi lava.

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

Swirhendzevutana

Engetela .progress-bar-stripedeka xin’wana na xin’wana .progress-barku tirhisa xirhendzevutana hi ku tirhisa CSS gradient ehenhla ka muvala wa le ndzhaku wa barhi ya nhluvuko.

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

Mitila leyi nga ni swifaniso leswi hanyaka

Gradient leyi nga ni mitila na yona yi nga ha va ni swifaniso leswi hanyaka. Engetela .progress-bar-animatedeka .progress-barku endla leswaku swirhendzevutana swi hanya exineneni ku ya eximatsini hi ku tirhisa swifaniso leswi hanyaka swa CSS3.

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

Sass

Swilo leswi cinca-cincaka

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

Tifreimi ta swilotlelo

Yi tirhisiwa ku endla swifaniso swa CSS swa .progress-bar-animated. Ku katsiwile eka scss/_progress-bar.scss.

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