Progress bar adalah sebuah bar yang diberikan value atau nilai tertentu untuk menyatakan sudah sebatas mana proses yang sudah dicapai. Progress bar ini banyak digunakan di website besar terutama website tentang tutorial untuk menyatakan sudah sejauh mana materi yang dipelajari oleh pengguna web tersebut.
Untuk bisa membuat progress bar di dalam web, kita harus menggunakan HTML untuk mendeklarasikannya serta CSS untuk mendekorasinya nanti.
Sebelum kita beralih ke proses pembuatan progress bar tersebut, ada yang perlu anda ketahui bahwa progress bar ini berbeda-beda tampilannya untuk setiap browser. Bentuk progress bar akan menyesuaikan tampilannya sesuai settingan pada masing-masing browser.
Bisa anda lihat gambar di bawah ini yang menampilkan tampilan progress bar yang berbeda saat dibuka menggunakan browser Google Chrome dan Firefox.
Selanjutnya kita akan membahas bagaimana cara membuat progress bar dengan HTML dan CSS. Simak langkah-langkahnya sebagai berikut.
Yaa itu adalah tampilan progress bar sederhana yang kita buat menggunakan tag HTML. Selanjutnya kita akan membahas atribut yang digunakan di dalam tag progress.
Ada 3 atribut yang sering digunakan di dalam tag progress yaitu:
Berikut adalah contoh kode tag progress yang menggunakan 3 atribut di atas sekaligus.
maka hasilnya adalah seperti di bawah ini.
Dari progress bar diatas, diketahui bahwa nilai yang berhasil dicapai adalah 35 dari 100.
Baca juga: Mari belajar pemrograman dari android menggunakan SoloLearn
Kita akan sedikit bermain-main dengan kode progress bar diatas yaitu dengan mengubah nilai atribut min atau menghapus atribut min. Coba masukkan kode ini.
1.
2.
Hasilnya adalah:
1.
2.
Dari hasil progress bar diatas tidak terjadi perubahan apa-apa. Dari sini bisa kita ambil kesimpulan bahwa atribut min tidak berpengaruh di dalam tag progress.
Lalu bagaimana dengan atribut max, apakah juga berpengaruh? Silakan masukkan kode berikut.
1.
2.
Hasilnya:
1.
2.
Dari hasil progress bar diatas, bisa disimpulkan bahwa atribut max berpengaruh di dalam tag progress.
Itulah tadi tampilan progress bar default menggunakan HTML. Sekarang kita akan membuat tampilannya sedikit berbeda dengan bantuan CSS seperti pada gambar berikut. Gambar contoh di bawah menggunakan browser Google Chrome.
Untuk membuatnya seperti gambar di atas, silakan sobat masukkan kode di bawah ini ke dalam editor kode, saya rekmendasikan menggunakan Notepad++.
Bagaimana sobat, tampilannya jadi lebih menarik bukan setelah ditambah CSS? Bisa dilihat pada kode diatas, CSS yang kita gunakan adalah terletak diantara tag
Itulah tadi tutorial mengenai cara membuat progress bar menggunakan HTML dan CSS. Semoga bisa bermanfaat untuk sobat-sobat sekalian.
Untuk bisa membuat progress bar di dalam web, kita harus menggunakan HTML untuk mendeklarasikannya serta CSS untuk mendekorasinya nanti.
Sebelum kita beralih ke proses pembuatan progress bar tersebut, ada yang perlu anda ketahui bahwa progress bar ini berbeda-beda tampilannya untuk setiap browser. Bentuk progress bar akan menyesuaikan tampilannya sesuai settingan pada masing-masing browser.
Bisa anda lihat gambar di bawah ini yang menampilkan tampilan progress bar yang berbeda saat dibuka menggunakan browser Google Chrome dan Firefox.
Selanjutnya kita akan membahas bagaimana cara membuat progress bar dengan HTML dan CSS. Simak langkah-langkahnya sebagai berikut.
Cara Membuat Progress Bar dengan HTML dan CSS
Untuk bisa membuat progress bar, kita hanya perlu memasukkan tag<progress></progress> atau <progress/> (silakan pilih salah satu). Maka hasil yang keluar adalah seperti di bawah ini.Yaa itu adalah tampilan progress bar sederhana yang kita buat menggunakan tag HTML. Selanjutnya kita akan membahas atribut yang digunakan di dalam tag progress.
Ada 3 atribut yang sering digunakan di dalam tag progress yaitu:
- min, menyatakan batas minimal nilai.
- max, menyatakan batas maksimal nilai.
- value, menyatakan nilai yang dicapai di dalam progress bar.
Berikut adalah contoh kode tag progress yang menggunakan 3 atribut di atas sekaligus.
<progress min="0" max="100" value="35"></progress>maka hasilnya adalah seperti di bawah ini.
Dari progress bar diatas, diketahui bahwa nilai yang berhasil dicapai adalah 35 dari 100.
Baca juga: Mari belajar pemrograman dari android menggunakan SoloLearn
Kita akan sedikit bermain-main dengan kode progress bar diatas yaitu dengan mengubah nilai atribut min atau menghapus atribut min. Coba masukkan kode ini.
1.
<progress min="20" max="100" value="35"></progress>2.
<progress max="100" value="35"></progress>Hasilnya adalah:
1.
2.
Dari hasil progress bar diatas tidak terjadi perubahan apa-apa. Dari sini bisa kita ambil kesimpulan bahwa atribut min tidak berpengaruh di dalam tag progress.
Lalu bagaimana dengan atribut max, apakah juga berpengaruh? Silakan masukkan kode berikut.
1.
<progress max="100" value="35"></progress>2.
<progress max="50" value="35"></progress>Hasilnya:
1.
2.
Dari hasil progress bar diatas, bisa disimpulkan bahwa atribut max berpengaruh di dalam tag progress.
Itulah tadi tampilan progress bar default menggunakan HTML. Sekarang kita akan membuat tampilannya sedikit berbeda dengan bantuan CSS seperti pada gambar berikut. Gambar contoh di bawah menggunakan browser Google Chrome.
<!DOCTYPE html>
<head>
<style>
.progress {
width: 70%;
height: 20px;
color: #3fb6b2;
background: #efefef;
}
.progress::-webkit-progress-bar {
background: #efefef;
}
.progress::-webkit-progress-value {
background: #3fb6b2;
}
.progress::-moz-progress-bar {
color: #3fb6b2;
background: #efefef;
}
</style>
</head>
<body>
<ul>
<li>HTML <br/>
<progress class='progress' min="0" max="100" value="80"></progress></li>
<li>CSS <br/>
<progress class='progress' min="0" max="100" value="50"></progress></li>
<li>Javascript <br/>
<progress class='progress' min="0" max="100" value="25"></progress></li>
</ul>
</body/>
</html>
Bagaimana sobat, tampilannya jadi lebih menarik bukan setelah ditambah CSS? Bisa dilihat pada kode diatas, CSS yang kita gunakan adalah terletak diantara tag
<style> dan </style>. Kamu bisa mengutak-atik lagi kode diatas sesuai dengan kebutuhan.Itulah tadi tutorial mengenai cara membuat progress bar menggunakan HTML dan CSS. Semoga bisa bermanfaat untuk sobat-sobat sekalian.
