Kufambira mberi

Zvinyorwa uye mienzaniso yekushandisa Bootstrap tsika kufambira mberi mabara ane tsigiro yemabhawa akaturikidzana, animated background, uye mavara mavara.

Pa peji ino

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 .progressseyakaputira kuratidza iyo max kukosha kweiyo kufambira mberi bar.
Isu tinoshandisa mukati .progress-barkuratidza kufambira mberi kusvika ikozvino.
Izvo .progress-barzvinoda inline maitiro, utility kirasi, kana tsika CSS kuseta hupamhi hwavo.
Iyo .progress-barinodawo zvimwe roleuye ariahunhu 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.

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>

Urefu

Isu tinongoisa heightkukosha pane iyo .progress, saka kana iwe ukachinja kukosha ikoko, yemukati .progress-barinongozvikurira 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-stripedkune chero .progress-barkuti 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-animatedkune .progress-barkumhanyisa 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; }
  }
}