Okukulakulana
Ebiwandiiko n'ebyokulabirako by'okukozesa Bootstrap custom progress bars ezirimu obuwagizi ku bbaala ezitumbiddwa, ebifaananyi ebirina obulamu, n'ebiwandiiko ebiwandiikiddwa.
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
.progress
nga wrapper okulaga max value ya progress bar. - Tukozesa eby’omunda
.progress-bar
okulaga enkulaakulana okutuuka wano. - The
.progress-bar
yeetaaga sitayiro ya mu layini, ekibiina ky'omugaso, oba CSS eya bulijjo okuteeka obugazi bwazo. - The
.progress-bar
era yeetaaga ebimurole
n’ebintuaria
okugifuula 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
.
<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 height
omuwendo gwokka ku .progress
, kale bw’okyusa omuwendo ogwo ogw’omunda .progress-bar
gujja 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-striped
ku kyonna .progress-bar
okusiiga omuguwa ng'oyita mu CSS gradient ku langi y'emabega ey'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-animated
ku .progress-bar
okusobola 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; }
}
}