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
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>Kode di atas akan menampilkan Progress Bar dengan panjang 25% dan teks “25%” di dalamnya.
Warna pada progres Bars
<!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>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!
Leave a Reply