Kufambira mberi
Zvinyorwa uye mienzaniso yekushandisa Bootstrap tsika kufambira mberi mabara ane tsigiro yemabhawa akaturikidzana, animated background, uye mavara mavara.
Zvinoshanda sei
Zvikamu zvekufambira mberi zvakavakwa nemhando mbiri dzeHTML, imwe CSS yekuseta hupamhi, uye mashoma hunhu. Isu hatishandise iyo HTML5 <progress>
element , kuve nechokwadi kuti unokwanisa kurongedza mabara ekufambira mberi, kuararamisa, uye kuisa mavara mavara pamusoro pawo.
- Isu tinoshandisa iyo
.progress
seyakaputira kuratidza iyo max kukosha kweiyo kufambira mberi bar. - Isu tinoshandisa mukati
.progress-bar
kuratidza kufambira mberi kusvika ikozvino. - Izvo
.progress-bar
zvinoda inline maitiro, utility kirasi, kana tsika CSS kuseta hupamhi hwavo. - Iyo
.progress-bar
inodawo zvimwerole
uyearia
hunhu kuita kuti iwanike.
Isa izvo zvose pamwe chete, uye une mienzaniso inotevera.
<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 inopa mashoma ezvishandiso zvekuseta hupamhi . Zvichienderana nezvaunoda, izvi zvinogona kubatsira nekukurumidza kugadzirisa kufambira mberi.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Labels
Wedzera mavara kumabhawa ako ekufambira mberi nekuisa mavara mukati me .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>
Urefu
Isu tinongoisa height
kukosha pane iyo .progress
, saka kana iwe ukachinja kukosha ikoko, yemukati .progress-bar
inongozvikurira zvinoenderana.
<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>
Backgrounds
Shandisa makirasi ekushandisa kumashure kuti uchinje kutaridzika kwemabhawa ekufambira mberi.
<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>
Mabhawa akawanda
Sanganisira mabhawa akawanda ekufambira mberi mune chikamu chekufambira mberi kana uchida.
<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>
Striped
Wedzera .progress-bar-striped
kune chero .progress-bar
kuti uise mutsetse kuburikidza neCSS gradient pamusoro peiyo bhari yekufambira mberi kwemuvara.
<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>
Animated mitsetse
Iyo mitsetse gradient inogona zvakare kuve nehupenyu. Wedzera .progress-bar-animated
kune .progress-bar
kumhanyisa mitsetse kurudyi kuruboshwe kuburikidza neCSS3 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
Variables
$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;
Keyframes
Inoshandiswa kugadzira iyo CSS animations ye .progress-bar-animated
. Inosanganisirwa mu scss/_progress-bar.scss
.
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: $progress-height; }
}
}