kemajuan
Dokumentasi lan conto kanggo nggunakake garis kemajuan adat Bootstrap sing nampilake dhukungan kanggo bar sing ditumpuk, latar mburi animasi, lan label teks.
Cara kerjane
Komponen kemajuan dibangun nganggo rong unsur HTML, sawetara CSS kanggo nyetel jembar, lan sawetara atribut. Kita ora nggunakake unsur HTML5<progress>
, mesthekake sampeyan bisa numpuk progress bar, animate wong, lan sijine label teks ing ndhuwur.
- Kita nggunakake
.progress
minangka pambungkus kanggo nunjukaké Nilai max saka garis kemajuan. - Kita nggunakake batin
.progress-bar
kanggo nuduhake kemajuan nganti saiki. .progress-bar
Mbutuhake gaya inline, kelas sarana, utawa CSS khusus kanggo nyetel ambane .- Uga
.progress-bar
mbutuhake sawetararole
lanaria
atribut supaya bisa diakses.
Sijine kabeh, lan sampeyan duwe conto ing ngisor iki.
<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 nyedhiyakake sawetara utilitas kanggo nyetel ambane . Gumantung saka kabutuhan sampeyan, iki bisa mbantu kanthi cepet ngatur proses.
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Label
Tambah label menyang bar kemajuan kanthi nyelehake teks ing .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>
dhuwur
Kita mung nyetel height
nilai ing .progress
, dadi yen sampeyan ngganti nilai kasebut, batin .progress-bar
bakal kanthi otomatis ngowahi ukurane.
<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 mburi
Gunakake kelas sarana latar mburi kanggo ngganti tampilan garis kemajuan 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>
Multiple bar
Kalebu pirang-pirang bar kemajuan ing komponen kemajuan yen perlu.
<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
Tambah .progress-bar-striped
menyang sembarang .progress-bar
kanggo aplikasi belang liwat CSS gradien liwat werna latar mburi garis 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>
Strip animasi
Gradien belang uga bisa dianimasikan. Tambah .progress-bar-animated
kanggo .progress-bar
animasi loreng tengen ngiwa liwat 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>