Kemajuan

Dokumentasi dan contoh untuk menggunakan bilah kemajuan khusus Bootstrap yang menampilkan dukungan untuk bilah bertumpuk, latar belakang animasi, dan label teks.

Di halaman ini

Bagaimana itu bekerja

Komponen kemajuan dibangun dengan dua elemen HTML, beberapa CSS untuk mengatur lebar, dan beberapa atribut. Kami tidak menggunakan elemen HTML5<progress> , memastikan Anda dapat menumpuk bilah kemajuan, menganimasikannya, dan menempatkan label teks di atasnya.

Kami menggunakan .progresssebagai pembungkus untuk menunjukkan nilai maksimal dari bilah kemajuan.
Kami menggunakan bagian dalam .progress-baruntuk menunjukkan kemajuan sejauh ini.
.progress-barMembutuhkan gaya sebaris, kelas utilitas, atau CSS khusus untuk mengatur lebarnya .
Itu .progress-barjuga membutuhkan beberapa roledan ariaatribut untuk membuatnya dapat diakses, termasuk nama yang dapat diakses (menggunakan aria-label, aria-labelledby, atau serupa).

Gabungkan semuanya, dan Anda memiliki contoh berikut.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basic example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap menyediakan beberapa utilitas untuk mengatur lebar . Tergantung pada kebutuhan Anda, ini dapat membantu dengan cepat mengonfigurasi kemajuan.

html

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

Label

Tambahkan label ke bilah kemajuan Anda dengan menempatkan teks di dalam .progress-bar.

25%

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Example with label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Tinggi

Kami hanya menetapkan heightnilai pada .progress, jadi jika Anda mengubah nilai itu, bagian dalam .progress-barakan secara otomatis mengubah ukurannya.

html

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Example 1px high" 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" aria-label="Example 20px high" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Latar belakang

Gunakan kelas utilitas latar belakang untuk mengubah tampilan bilah kemajuan individual.

html

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success example" 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" aria-label="Info example" 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" aria-label="Warning example" 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" aria-label="Danger example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Beberapa bar

Sertakan beberapa bilah kemajuan dalam komponen kemajuan jika Anda membutuhkannya.

html

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment one" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment two" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment three" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

bergaris

Tambahkan .progress-bar-stripedke apapun .progress-baruntuk menerapkan garis melalui gradien CSS di atas warna latar belakang bilah kemajuan.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Default striped example" 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" aria-label="Success striped example" 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" aria-label="Info striped example" 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" aria-label="Warning striped example" 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" aria-label="Danger striped example" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Garis-garis animasi

Gradien bergaris juga dapat dianimasikan. Add .progress-bar-animatedto .progress-baruntuk menganimasikan garis-garis dari kanan ke kiri melalui animasi CSS3.

html

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Animated striped example" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS yang berkembang dari Bootstrap, bilah kemajuan sekarang menggunakan variabel CSS lokal .progressuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}progress-height: #{$progress-height};
  @include rfs($progress-font-size, --#{$prefix}progress-font-size);
  --#{$prefix}progress-bg: #{$progress-bg};
  --#{$prefix}progress-border-radius: #{$progress-border-radius};
  --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
  --#{$prefix}progress-bar-color: #{$progress-bar-color};
  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
  --#{$prefix}progress-bar-transition: #{$progress-bar-transition};

Variabel Sass

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

Bingkai utama

Digunakan untuk membuat animasi CSS untuk .progress-bar-animated. Termasuk dalam scss/_progress-bar.scss.

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