Cara Membuat Progress Bar Bootstrap 4 dengan Javascript

jadi pada artikel kali ini kita akan coba membuat progress bar, sebelumnya teman-teman tau ya, dah sudah pernah melihat minimal, tetapi untuk sekarang saya yakin teman-teman sudah pernah melihat tetapi mungkin belum tau itu adalah sebah progress bar, ya betul progress bar itu seperti ketika kita mengcopy file, mengcut file, biasanya kita di suguhkan sebuah garis, dimana kita harus menunggu 100% supaya copy / cut selesai, oke apa saya yang kita butuhkan untuk belajar cara membuat progress bar bootstrap 4 dengan javascript, simak terus ya teman-teman.

cara membuat progress bar bootstrap 4 dengan javascript disini saya menggunakan tampilan dengan bootstrap 4 ya, supaya tampilan progress barnya lebih menarik dan cantik, dan untuk kasus kita kali ini jadi saya sudah menyiapkan struktur HTML seperti:

input type range untuk mengatur tampilan progress barnya akan di tampilkan berapa persen
dan tentunya progress bar itu sendiri,
dan nanti kita akan menggunakan event change pada input type range supaya valuenya berubah-rubah dan di masukan kedalam progressnya.

oke langsung saja kita lihat cara membuatnya ya, silahkan teman-teman tulis struktur dan kodenya seperti ini:

<!DOCTYPE html>
<html>
<head>
	<title>Cara Membuat Progress Bar dengan Javascript</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-12">
				<div class="progress form-group" style="height: 20px">
					<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
				</div>

				<input type="range" min="0" max="100" value="0" id="range">		
			</div>
		</div>
	</div>

<script type="text/javascript">
	var range = document.getElementById("range")
	var progress = document.querySelector(".progress-bar")

range.addEventListener("change", function(){
	var val = this.value
	progress.style.width = val+"%"
	
	if(val == 100){
		progress.classList.add("bg-success")
		progress.textContent ="Selesai"
	}else{
		progress.classList.remove("bg-success")
		progress.textContent = val+"%"
	}
})
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Cara Membuat Progress Bar dengan Javascript</title>

</head>

<body>

</div>

</div>

var range = document.getElementById("range")

var progress = document.querySelector(".progress-bar")

range.addEventListener("change", function(){

var val = this.value

progress.style.width = val+"%"

if(val == 100){

progress.classList.add("bg-success")

progress.textContent ="Selesai"

}else{

progress.classList.remove("bg-success")

progress.textContent = val+"%"

}

})

</script>

</body>

</html>

jika sudah silahkan teman-teman coba, dan disini saya akan mencoba menggeser input type rangenya ke tengah di mana berarti kita mencoba memberika value sekita 50% ya, seperti ini tampilannya:

bagaimana apakah punya teman-teman sudah berhasil tampil seperti punya saya di atas, dan contoh di atas saya juga menambahkan sedikit ya, jadi ketika progress bar sudah mencapai 100% maka warna progress bar itu sendiri akan berwarna hijau.

dan untuk meliat livenya teman-teman bisa lihat disini:

klik disini yRZYzM by bento (@masbeni) on CodePen.

bagaimana cukup simple ya, dan saya rasa cukup sampai disini belajar kita tentang cara membuat progress bar bootstrap 4 dengan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.

Facebook DUMET School

Categories