Membuat Progress Bars dengan Bootstrap

Membuat Progress Bars dengan Bootstrap

—

by

Webbiz.ID
in

Progress Bars adalah salah satu komponen yang sering digunakan dalam desain web untuk menunjukkan kemajuan atau status suatu proses. Dalam Bootstrap, kita dapat dengan mudah membuat Progress Bars yang responsif dan menarik. Berikut adalah contoh Membuat Progress Bars dengan Bootstrap menggunakan Bootstrap

HTML
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
HTML
Progres Bars Bootstrap

Kode di atas akan menampilkan Progress Bar dengan panjang 25% dan teks “25%” di dalamnya.

Warna pada progres Bars

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Warna Progress Bars</h2>
 
  <!-- Blue -->
  <div class="progress">
    <div class="progress-bar" style="width:10%"></div>
  </div><br>

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

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

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

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

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

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

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

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

</body>
</html>
HTML
Bootstrap

Warna Progress Bars










Selain itu, Bootstrap juga menyediakan beberapa opsi tambahan untuk mengkustomisasi tampilan Progress Bars, seperti mengubah warna, animasi, dan ukuran. Anda dapat menemukan dokumentasi lengkap tentang Progress Bars di situs resmi Bootstrap.

Dengan menggunakan Bootstrap, kita dapat dengan mudah membuat Progres Bars yang menarik dan responsif dalam desain web kita. Selamat mencoba!

Artikel Terbaru ⭐