Kembali lagi di tutorial bootstrap ke 27, yang kali ini akan membahas mengenai salah satu komponen dari bootstrap lagi yaitu Progress atau banyak yang menyebut Progress Bar.
Progress bar merupakan komponen bootstrap yang digunakan untuk menunjukkan kemajuan dari suatu hal. Saya yakin teman – teman tidak asing lagi dengan komponen satu ini karena kita cukup sering melihat nya.
Sedikit Pejelasan bagaimana cara kerja dari progress bar pada bootstrap khususnya bootstrap versi 4:
Komponen Progress ini dibuat dengan menggunakan HTML dan CSS untuk mengatur lebar dan atribut lainnya. Sebenarnya dalam HTML 5 sudah ada elemen <progress> untuk membuat pogress bar tetapi kita tidak akan menggunakan nya karena jika kita menggunakan tag <progress> maka kita akan sulit melakukan variasi seperti menganimasikan atau menambahkan text label.
Section Artikel
Basic Progres
Untuk membuat dasar dari komponen progres bar ini kita akan menggunakan beberapa class dengan penjelasan:
- Menggunakan class .progress sebagai class pada element utama atau induk untuk menunjukkan nilai maksimal dari Komponen progress (biasa ditempatkan dalam tag
<div>) - Menggunakan class .progress-bar pada element sekunder untuk menunjukan nilai progress saat ini (biasa ditempatkan dalam tag
<div>) - Class .progress-bar memerlukan css inline untuk mengatur lebarnya (width)
- Terdapat beberapa atribut dalam div yang menggunakan class .progress-bar dapat digunakan beberapa atribut tambahan diantaranya:
- aria-valuemin=”nilai” -> untuk mengatur nilai minimum dari progress bar
- aria-valuemax=”nilai” -> untuk mengatur nilai maximum dari pogress bar
- aria-valuenow=”nilai” -> untuk mengatur nilai saat ini dari progress bar (harus berada diantara nilai maksium dan minimum)
langsung saja contoh dasarnya:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Progress Bar</h2> <div class="progress"> <div class="progress-bar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </body> </html>
Tinggi dan label Progress Bar
Kita dapat mengatur tinggi atau tebal dari Progress bar dengan menggunakan properti CSS yaitu height. Jangan lupa untuk mengatur tinggi yang sama antara element induk dengan elemen sekunder tempat Progress bar dibuat. contoh:
<div class="progress" style="height:10px"> <div class="progress-bar" style="height:10px"> </div></div>
Secara defult tinggi dari Progress bar dalam bootstrap adalah 16px.
Untuk menambahkan label tinggal menuliskan angka pada elemen dengan class .progress-bar.
contoh program nya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Tinggi atau tebal Progress Bar</h2>
<div class="progress" style="height:10px"> <!-- tinggi nya harus mengukuti element sekunder -->
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>
<br>
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:50%;height:20px"></div>
</div>
<br>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width:60%;height:30px"></div>
</div>
</div>
<div class="container">
<h2>Progress Bar dengan Label</h2>
<div class="progress">
<div class="progress-bar" style="width:64%">64%</div>
</div>
</div>
</body>
</html>Warna Progress Bar
Sebelum ke pembahasan mengenai pemberian warna pada progress bar maka silahkan baca dahulu Warna di Bootstrap: Bootstrap Tutorial #6. Karena artikel tersebut sedikit banyak akan digunakan pada bagian ini.
Untuk memberi warna pada progress bar kita hanya perlu menambahkan class utilitas yang dimiliki bootstrap yaitu warna. Ada beberapa pilihan diantaranya:
| Class | Warna |
|---|---|
.bg-success | warna background hijau |
.bg-info | warna background biru tua |
.bg-warning | warna background oranye |
.bg-danger | warna background merah |
.bg-white | warna background putih |
.bg-secondary | warna background abu-abu |
.bg-light | warna background abu-abu terang |
.bg-dark | warna background hitam |
.bg-primary | warna background biru muda . Secara default warna dari Progress bar bootstrap adalah menggunakan class .bg-primary |
Contoh nya adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Warna Progress Bars</h2>
<!-- Biru -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div><br>
<!-- Hijau -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div><br>
<!-- biru tua -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div><br>
<!-- oranye -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div><br>
<!-- merah -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div><br>
<!-- putih -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div><br>
<!-- abu-abu -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div><br>
<!-- abu-abu terang -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div><br>
<!-- hitam -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
</div>
</body>
</html>Stripped progress bars
Apakah progress bar teman -teman terlihat monoton, coba gunakan class .progress-bar-striped untuk memberi efek bergaris pada progress bar. Class tersebut ditempatkan dalam elemen sekunder setelah class .progress-bar. Contoh penggunaannya adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
</div>
</div>
</body>
</html>Animasi Progres Bar
Kalau bisa ditambahkan efek striped atau bergaris apakah progress bar dapat dianimasikan ? jawabannya tentu saja bisa, yaitu dengan menambahkan class .progress-bar-animated setelah class .progress-bar progres-bar-striped. Class tersebut akan menyebabkan efek stripped pada progress bar seolah – oleh berputar atau dianimasikan.
contoh penerapannya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Animasi Progress Bar</h2>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</div>
</body>
</html>Multiple Progress Bar
Selain diberi efek stripped atau dianimasikan kita juga dapat membuat progress bar dengan membaginya menjadi beberapa bagian seperti 20% nya diberi warna merah, 30% diberi warna oranye, sisa nya tetap biru.
untuk melakukan itu kita cukup menambahkan komponen dengan class .progress-bar lagi sebanyak yang kita mau dengan syarat masih didalam satu elemen dengan class .progress.
Contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Multiple Progress Bar</h2>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Ini 40%
</div>
<div class="progress-bar bg-warning" style="width:30%">
ini 30%
</div>
<div class="progress-bar bg-danger" style="width:20%">
Ini 20%
</div>
</div>
</div>
</body>
</html>Sekian penjelasan mengenai komponen bootstrap yaitu progress bar, teman teman dapat berekperimen sendiri dengan mengganti CSS atau memakai javascript agar sesuai dengan kebutuhan teman-teman.
Sekian terima kasih
