Bootstrap - Bilah Kemajuan

Bab ini membahas tentang bilah kemajuan Bootstrap. Tujuan bilah kemajuan adalah untuk menunjukkan bahwa aset sedang dimuat, dalam proses, atau bahwa ada tindakan yang sedang berlangsung terkait elemen di laman.

Progress bar menggunakan transisi dan animasi CSS3 untuk mencapai beberapa efeknya. Fitur ini tidak didukung di Internet Explorer 9 dan yang lebih lama atau versi Firefox yang lebih lama. Opera 12 tidak mendukung animasi.

Bilah Kemajuan Default

Untuk membuat bilah kemajuan dasar -

Tambahkan <div> dengan kelas .progress.
Selanjutnya, di dalam <div> di atas, tambahkan <div> kosong dengan kelas .progress-bar.
Tambahkan atribut gaya dengan lebar yang dinyatakan sebagai persentase. Ucapkan misalnya, style = "60%"; menunjukkan bahwa bilah kemajuan berada di 60%.

Mari kita lihat contoh di bawah ini -

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Bilah Kemajuan Alternatif

Untuk membuat bilah kemajuan dengan gaya berbeda -

Tambahkan <div> dengan kelas .progress.
Selanjutnya, di dalam <div> di atas, tambahkan <div> kosong dengan kelas .progress-bar dan kelas progress-bar-* di mana * bisa success, info, warning, danger.
Tambahkan atribut gaya dengan lebar yang dinyatakan sebagai persentase. Ucapkan misalnya, style = "60%"; menunjukkan bahwa bilah kemajuan berada di 60%.

Mari kita lihat contoh di bawah ini -

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Bilah Kemajuan Bergaris

Untuk membuat bilah kemajuan bergaris -

Tambahkan <div> dengan kelas .progress dan .progress-striped.
Selanjutnya, di dalam <div> di atas, tambahkan <div> kosong dengan kelas .progress-bar dan kelas progress-bar-* di mana * bisa success, info, warning, danger.
Tambahkan atribut gaya dengan lebar yang dinyatakan sebagai persentase. Ucapkan misalnya, style = "60%"; menunjukkan bahwa bilah kemajuan berada di 60%.

Mari kita lihat contoh di bawah ini -

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Bilah Kemajuan Animasi

Untuk membuat bilah kemajuan animasi -

Tambahkan <div> dengan kelas .progress dan .progress-striped. Tambahkan juga kelas.active untuk .progress-striped.
Selanjutnya, di dalam <div> di atas, tambahkan <div> kosong dengan kelas .progress-bar.
Tambahkan atribut gaya dengan lebar yang dinyatakan sebagai persentase. Ucapkan misalnya, style = "60%"; menunjukkan bahwa bilah kemajuan berada di 60%.

Ini akan menganimasikan garis dari kanan ke kiri.

Mari kita lihat contoh di bawah ini -

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Bilah Kemajuan Bertumpuk

Anda bahkan dapat menumpuk beberapa bilah kemajuan. Tempatkan beberapa bilah kemajuan menjadi sama.progress untuk menumpuknya seperti yang terlihat pada contoh berikut -

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>