Kemajuan
Dokumentasi dan contoh untuk menggunakan bilah kemajuan khusus Bootstrap yang menampilkan dukungan untuk bilah bertumpuk, latar belakang animasi, dan label teks.
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
.progress
sebagai pembungkus untuk menunjukkan nilai maksimal dari bilah kemajuan. - Kami menggunakan bagian dalam
.progress-bar
untuk menunjukkan kemajuan sejauh ini. .progress-bar
Membutuhkan gaya sebaris, kelas utilitas, atau CSS khusus untuk mengatur lebarnya .- Itu
.progress-bar
juga membutuhkan beberaparole
danaria
atribut untuk membuatnya dapat diakses.
Gabungkan semuanya, dan Anda memiliki contoh berikut.
<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 menyediakan beberapa utilitas untuk mengatur lebar . Tergantung pada kebutuhan Anda, ini dapat membantu dengan cepat mengonfigurasi kemajuan.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" 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
.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
Tinggi
Kami hanya menetapkan height
nilai pada .progress
, jadi jika Anda mengubah nilai itu, bagian dalam .progress-bar
akan secara otomatis mengubah ukurannya.
<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>
Latar belakang
Gunakan kelas utilitas latar belakang untuk mengubah tampilan bilah kemajuan individual.
<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>
Beberapa bar
Sertakan beberapa bilah kemajuan dalam komponen kemajuan jika Anda membutuhkannya.
<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>
bergaris
Tambahkan .progress-bar-striped
ke apapun .progress-bar
untuk menerapkan garis melalui gradien CSS di atas warna latar belakang bilah kemajuan.
<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>
Garis-garis animasi
Gradien bergaris juga dapat dianimasikan. Add .progress-bar-animated
to .progress-bar
untuk menganimasikan garis-garis dari kanan ke kiri melalui 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>
Kelancangan
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;
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; }
}
}