Progress bar merupakan sebuah komponen yang berguna untuk membuat gambaran kemajuan sebuah proses dari suatu kinerja. Pada tahap ini kita akan mencoba membuat progress bar sederhana menggunakan bootstrap 4.
Perhatikan contoh cara membuat progress bar berikut berikut :
<div class="progress"> <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div> </div>
Untuk membuat progress bar dengan bootstrap, kita menggunakan 2 elemen <div> .. </div>. Kita menggunakan class progress pada <div> yang pertama, kemudian di dalam <div> tersebut kita buat elemen <div> lagi dengan menuliskan class progress-bar juga.
Di dalam elemen div yang menggunakan class progress-bar terdapat beberapa atribut yang fungsinya seperti berikut.
- aria-valuemin=””
atribut utuk pengaturan nilai maksimum dari progress bar. - aria-valuemax=””
atribut untuk pengaturan nilai minimum dari progress bar. - aria-valuenow=””
atribut untuk pengaturan nilai sekarang (antara nilai maximum dan nilai minimum).
Silahkan isi nilai pada atribut tersebut.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 25%"
aria-valuenow="25"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti berikut :
Seperti yang terlihat pada gambar hasil di atas progress bar tampil sesuai dengan nilainya masing-masing.
Label Text Progress Bar
Kita juga bisa menuliskan text pada progress bar, caranya kita tinggal langsung menuliskan text di dalam element <div> .. </div> yang menggunakan class progress-bar.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Popovers Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
Label Text
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
<strong>80%</strong>
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar"
role="progressbar"
style="width: 46%"
aria-valuenow="46"
aria-valuemin="0"
aria-valuemax="100">
<strong>46%</strong>
</div>
</div>
</div>
</body>
</html>
Hasilnya label text yang kita tulis pun tampil di dalam progress bar seperti berikut :
Mengatur Tinggi Progress Bar
Untuk mengatur tinggi progress bar, kita bisa langsung menerapkan inline css pada elemen <div> yang memiliki class progress.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Progressbar Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
Mengatur Tinggi Progress Bar
<br/>
<div class="progress" style="height: 5px">
<div
class="progress-bar"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
</div>
</div>
<br/>
<div class="progress" style="height: 20px">
<div
class="progress-bar"
role="progressbar"
style="width: 50%"
aria-valuenow="50"
aria-valuemin="0"
aria-valuemax="100">
50%
</div>
</div>
<br/>
<div class="progress" style="height: 50px">
<div
class="progress-bar"
role="progressbar"
style="width: 75%"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
75%
</div>
</div>
</div>
</body>
</html>
Pada contoh di atas kita membuat 3 progress bar, progress bar yang pertama kita atur tingginya sebesar 5px, progress bar kedua 20px dan yang ketiga 50px.
Hasilnya seperti berikut ini :
Mengatur Warna Progress Bar
Untuk mengubah warna progress bar, kita bisa langsung menuliskan class warna dari bootstrap pada class progress-bar, class warna yang bisa kita gunakan adalah sebagai berikut :
- bg-primary
untuk membuat warna biru - bg-danger
untuk membuat warna merah - bg-warning
untuk membuat warna kuning - bg-info
untuk membuat warna biru toska - bg-success
untuk membuat warna hijau - bg-dark
untuk membuat warna hitam
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Progressbar Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
Warna Progress Bar
<br/>
<div class="progress">
<div
class="progress-bar bg-primary"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
80%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-danger"
role="progressbar"
style="width: 90%"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100">
90%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-warning"
role="progressbar"
style="width: 40%"
aria-valuenow="40"
aria-valuemin="0"
aria-valuemax="100">
40%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-info"
role="progressbar"
style="width: 70%"
aria-valuenow="70"
aria-valuemin="0"
aria-valuemax="100">
70%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100">
100%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar bg-dark"
role="progressbar"
style="width: 100%"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100">
100%
</div>
</div>
</div>
</body>
</html>
Hasilnya :
Efek Garis-Garis (striped) Pada Progress Bar
Bootstrap juga menyediakan class untuk membuat efek garis-garis pada progress bar dengan menggunakan class progress-bar-striped beriringan dengan class progress-bar.
Contohnya :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Progressbar Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
Striped Progress Bar
<br/>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-primary"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
80%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar progress-bar-striped bg-danger"
role="progressbar"
style="width: 90%"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100">
90%
</div>
</div>
</div>
</body>
</html>
Hasilnya :
Animasi Garis-Garis (animated striped)
Jika sudah menggunakan class progress-bar-striped untuk memberi efek garis-garis pada progress bar, akan lebih keren lagi jika kita tambahkan efek animasi.
Caranya silahkan tambahkan class progress-bar-animated beriringan dengan class progress-bar-striped.
Contoh :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Progress Bar Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<center>
<h3>Tutorial Progressbar Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<br/>
Striped Progress Bar
<br/>
<div class="progress">
<div
class="progress-bar progress-bar-animated progress-bar-striped bg-primary"
role="progressbar"
style="width: 80%"
aria-valuenow="80"
aria-valuemin="0"
aria-valuemax="100">
80%
</div>
</div>
<br/>
<div class="progress">
<div
class="progress-bar progress-bar-animated progress-bar-striped bg-danger"
role="progressbar"
style="width: 90%"
aria-valuenow="90"
aria-valuemin="0"
aria-valuemax="100">
90%
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti berikut, efek garis-garis yang kita buat akan diberi animasi secara otomatis, garis-garis akan seolah-olah berjalan :
Demikian tutorial tentang komponen progress bar pada bootstrap 4, semoga bermanfaat.
Be the first to comment