Okukulakulana

Ebiwandiiko n'ebyokulabirako by'okukozesa Bootstrap custom progress bars ezirimu obuwagizi ku bbaala ezitumbiddwa, ebifaananyi ebirina obulamu, n'ebiwandiiko ebiwandiikiddwa.

Ku muko guno

Engeri gye kikola

Ebitundu by’enkulaakulana bizimbibwa n’ebintu bibiri ebya HTML, ebimu CSS okuteeka obugazi, n’ebintu ebitonotono. Tetukozesa elementi ya HTML5<progress> , okukakasa nti osobola okuteeka ebbaala z’enkulaakulana, okuzifuula obulamu, n’okuziteekako obubonero bw’ebiwandiiko.

Tukozesa the .progressnga wrapper okulaga max value ya progress bar.
Tukozesa eby’omunda .progress-barokulaga enkulaakulana okutuuka wano.
The .progress-baryeetaaga sitayiro ya mu layini, ekibiina ky'omugaso, oba CSS eya bulijjo okuteeka obugazi bwazo.
The .progress-barera yeetaaga ebimu rolen’ebintu ariaokugifuula etuukirirwa.

Ebyo byonna biteeke wamu, era olina ebyokulabirako bino wammanga.

<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 egaba ebikozesebwa ebitonotono eby'okuteekawo obugazi . Okusinziira ku byetaago byo, bino biyinza okuyamba mu kutegeka amangu enkulaakulana.

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

Ebiwandiiko ebiwandiikibwako

Yongera ebiwandiiko ku bbaala zo ez'enkulaakulana ng'oteeka ebiwandiiko munda mu .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>

Obuwanvu

Tuteeka heightomuwendo gwokka ku .progress, kale bw’okyusa omuwendo ogwo ogw’omunda .progress-bargujja kukyusa obunene bw’omuntu okusinziira ku ekyo.

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

Ebifaananyi eby’emabega

Kozesa kiraasi z’ebikozesebwa eby’emabega okukyusa endabika y’embaawo z’enkulaakulana ssekinnoomu.

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

Ebbaala eziwera

Teekamu ebbaala z’enkulaakulana eziwera mu kitundu ky’enkulaakulana bw’oba weetaaga.

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

Emisono egy’enjawulo

Okwongera .progress-bar-stripedku kyonna .progress-barokusiiga omuguwa ng'oyita mu CSS gradient ku langi y'emabega y'ebbaala y'enkulaakulana.

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

Emisono egy’obulamu

Gradient eriko emisono nayo esobola okubeera ey’obulamu. Okwongerako .progress-bar-animatedku .progress-barokusobola okukola emisono obulamu okuva ku ddyo okudda ku kkono nga oyita mu CSS3 animations.

<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 nga bwe kiri

Enkyukakyuka ezikyukakyuka

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

Ebisumuluzo ebikulu

Ekozesebwa okukola ebifaananyi bya CSS ebya .progress-bar-animated. Ebirimu mu scss/_progress-bar.scss.

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