Cara Membuat Progress Bars pada Bootstrap

Cara Membuat Progress Bar pada Bootstrap
Cara Membuat Progress Bars pada Bootstrap

Cara Membuat Progress Bars pada Bootstrap

Cara Membuat Progress Bars pada Bootstrap – Dalam Bootstrap, ada yang namanya Progress Bar, apa itu? Progress bar ini dapat digunakan untuk informasi tentang seberapa jauh kemajuan user dalam melakukan suatu hal.

Baca juga: Membuat Navigation Bar pada Bootstrap.

Cara Membuat Progress Bars pada Bootstrap

Lalu bagaimana kita membuat Progress Bars pada Bootstrap? Dalam Bootstrap, ada beberapa class yang bisa kita gunakan untuk membuat Progress Bars. Cukup tambahkan class kedalam <div>. Bagaimana caranya? Tambahkan .progress ke dalam container dan .progress-bar di dalamnya. Lihat contoh berikut,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Progress Bar | codelatte.id</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Progress Bar | codelatte.id</h2>
  <p>Untuk membuat default progress bar, tambahkan <code>.progress</code> ke dalam elemen container lalu tambahkan <code>.progress-bar</code>. Kalian bisa gunakan <code>width</code> untuk mengatur lebar dari progress bar tersebut</p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>
</body>
</html>

Hasilnya akan menjadi seperti ini,

Default Progress Bars

Default Progress Bars

Memberi Label pada Progress Bars

Kita juga bisa memberi label di dalam progress bars, cukup rubah atau tambahkan sehingga menjadi seperti ini,

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Progress Bars Berwarna

Secara default, progress bars pada Bootstrap akan berwarna biru (primary). Namun kita bisa juga memberi warna pada progress bars tersebut. Lihat kode berikut,

<!-- Blue -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>

<!-- Green -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>

<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>

<!-- Orange -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<!-- Red -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<!-- White -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>

<!-- Grey -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>

<!-- Light Grey -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>

<!-- Dark Grey -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Animasi Progress Bars

Tambahkan .progress-bar-animated untuk membuat animasi progress bars. Contohnya seperti ini,

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>

Multiple Progress Bars

Kita juga bisa memisah progress bars menjadi beberapa bagian.

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Hijau
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Kuning
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Merah
  </div>
</div>

Untuk demo nya bisa dilihat dibawah ini,

See the Pen Progress Bars | codelatte.id by Abay (@abaykan) on CodePen.

Sekian artikel tentang Cara Membuat Progress Bars pada Bootstrap. Jika ada yang ingin ditanyakan, silahkan tinggalkan pertanyaan di kolom komentar. Semoga bermanfaat dan sampai jumpa pada artikel berikutnya.