Progress bar digunakan untuk menunjukkan proses yang sedang berjalan sperti loading. Kalian juga bisa memanfaatkan bentuk yang sama dengan progress bar untuk menunjukkan persentase hasil tes atau semacamnya.
Progress bar bisa dibuat dengan menggunakan tag progress. Selain itu, ada tag meter yang kegunaannya hampir sejenis. Kelemahan dari penggunaan tag HTML tanpa CSS adalah tampilannya relatif berbeda sesuai dengan browser yang digunakan. Jika kalian ingin tampilannya selalu sama, kalian bisa menggunakan CSS untuk memodifikasi tampilan elemen HTML yang sudah ada. Selain dengan memodifikasi elemen yang sudah ada, kalian bisa membuat custom progressbar dengan menggunakan CSS.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
body *{
box-sizing:border-box;
}
.progress_bar{
background:white;
border: solid 1px red;
width:100px;
height:10px;
border-radius:5px;
overflow:hidden;
}
.progress{
background:red;
height:100%;
}
</style>
</HEAD>
<BODY>
<label>Progress bar :</label><BR>
<progress value="50" max="100" style="height:20px;width:100px">50 dari 100</progress><BR>
<label>Meter :</label><BR>
<meter value="80" min="10" low="20" high=80" max="100" style="height:20px;width:100px">80 dari 100</meter><BR>
<label>Persentase (custom div) :</label><BR>
<div class="progress_bar">
<div class="progress" style="width:50%">
</div>
</BODY>
</HTML>
Tag <progress> dan <meter> sama-sama memiliki atribut value dan max. Max digunakan untuk menentukan nilai maksimal berdasarkan hasil perhitungan aslinya. Value digunakan untuk menentukan nilai "saat ini". Ukuran dari isi progress bar ataupun meter akan diperhitungkan berdasarkan nilai value dan max.
Atribut low dan high dalam tag <meter> seperti digunakan untuk menunjukkan batas nilai yang dianggap terlalu tinggi dan terlalu rendah. Dua atribut tersebut tidak diperlukan dalam tag progress.
Untuk membuat progress bar atau hasil yang menampilkan persentase dengan menggunakan CSS, kalian bisa menggunakan tag div yang berisi tag div lainnya. Tag div bagian luar digunakan untuk menampilkan border. Tag div bagian dalam bisa diberi panjang dengan persentase dan background sehingga bisa digunakan untuk menampilkan persentase proses atau hasil.