Kamajuan

Dokuméntasi sareng conto pikeun ngagunakeun bar kamajuan adat Bootstrap anu gaduh dukungan pikeun bar tumpuk, latar animasi, sareng labél téks.

Dina kaca ieu

Kumaha gawéna

Komponén kamajuan diwangun ku dua elemen HTML, sababaraha CSS pikeun nyetél lebar, sareng sababaraha atribut. Kami henteu nganggo unsur HTML5<progress> , mastikeun anjeun tiasa tumpukan bar kamajuan, ngahirupkeunana, sareng nempatkeun labél téks dina éta.

Kami nganggo .progresssalaku bungkus pikeun nunjukkeun nilai maksimal bar kamajuan.
Kami nganggo batin .progress-barpikeun nunjukkeun kamajuan dugi ka ayeuna.
Éta .progress-barperyogi gaya inline, kelas utiliti, atanapi CSS khusus pikeun nyetél lebarna.
Éta .progress-barogé peryogi sababaraha rolesareng ariaatribut supados tiasa diaksés.

Pasang sadayana babarengan, sareng anjeun gaduh conto di handap ieu.

<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 nyayogikeun sakeupeul utilitas pikeun netepkeun lebar . Gumantung kana kabutuhan anjeun, ieu tiasa ngabantosan kamajuan konfigurasi gancang.

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

Labels

Tambahkeun labél kana bar kamajuan anjeun ku cara nempatkeun téks dina .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>

Jangkungna

Urang ngan nyetel heightnilai dina .progress, jadi lamun ngarobah nilai nu jero .progress-barbakal otomatis ngarobah ukuran sasuai.

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

Kasang tukang

Anggo kelas utiliti latar pikeun ngarobih tampilan bar kamajuan individu.

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

Sababaraha bar

Kalebet sababaraha bar kamajuan dina komponén kamajuan upami anjeun peryogi.

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

belang

Tambihkeun .progress-bar-stripedkana naon waé .progress-barpikeun nerapkeun belang via gradién CSS dina warna latar tukang bar kamajuan.

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

Belang animasi

Gradién belang ogé tiasa animasi. Tambahkeun .progress-bar-animatedka .progress-barpikeun ngahirupkeun belang katuhu ka kenca via animasi CSS3.

<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

Variabel

$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

Dipaké pikeun nyieun animasi CSS pikeun .progress-bar-animated. Kaasup dina scss/_progress-bar.scss.

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