Foarútgong

Dokumintaasje en foarbylden foar it brûken fan Bootstrap oanpaste foarútgongsbalken mei stipe foar opsteapele balken, animearre eftergrûnen en tekstlabels.

Op dizze side

Hoe't it wurket

Progress-komponinten binne boud mei twa HTML-eleminten, wat CSS om de breedte yn te stellen, en in pear attributen. Wy brûke it HTML5 - <progress>elemint net , en soargje derfoar dat jo foarútgongsbalken steapele kinne, se animearje en tekstlabels oer har pleatse.

Wy brûke de .progressas wrapper om de maksimale wearde fan 'e foarútgongbalke oan te jaan.
Wy brûke de ynderlike .progress-barom de foarútgong oant no ta oan te jaan.
De .progress-barfereasket in ynline styl, nutklasse, of oanpaste CSS om har breedte yn te stellen.
De .progress-barfereasket ek wat roleen ariaattributen om it tagonklik te meitsjen.

Set dat alles byinoar, en jo hawwe de folgjende foarbylden.

<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 biedt in hantsjefol nutsfoarsjenningen foar it ynstellen fan breedte . Ofhinklik fan jo behoeften kinne dizze helpe by it fluch konfigurearjen fan foarútgong.

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

Labels

Foegje labels ta oan jo foarútgongsbalken troch tekst yn 'e .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>

Hichte

Wy sette allinich in heightwearde op 'e .progress, dus as jo dizze wearde feroarje, sil de ynderlike .progress-bargrutte automatysk oanpasse.

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

Eftergrûnen

Brûk eftergrûnnutsklassen om it uterlik fan yndividuele foarútgongbalken te feroarjen.

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

Meardere bars

Meitsje meardere foarútgongsbalken yn in foarútgongskomponint as jo nedich binne.

<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

Foegje .progress-bar-stripedoan elk .progress-barta om in stripe oan te passen fia CSS-gradient oer de eftergrûnkleur fan 'e foarútgongsbalke.

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

De stripe gradient kin ek wurde animearre. Taheakje .progress-bar-animatedoan .progress-barom de strepen fan rjochts nei lofts te animearjen fia CSS3-animaasjes.

<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

Fariabelen

$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

Wurdt brûkt foar it meitsjen fan de CSS-animaasjes foar .progress-bar-animated. Opnaam yn scss/_progress-bar.scss.

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