Hallo sahabat, bertemu kembali dalam pembahasan seputar website. Dalam kesempatan kali ini kita akan belajar cara membuat Scroll Progress Bar dengan jQuery. Jadi saat kita sedang mengunjungi halaman website tidak bisa melihat keseluruhan detailnya. Nah tentu harus kita scroll secara naik turun atau kesamping. Dalam kasus ini kita akan menampilkan progress bar saat melakukan scroll, bagaimana cara membuatnya yuk simak langkah-langkah membuatnya.

Langkah Pertama

Silahkan siapkan file html yang berisi seperti code dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Scroll Progress Bar Dengan jQuery</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="p-bar"></div>
	<div class="wrapper">
	<!-- silahkan buat 5 paragrap kemudian isi paragrap menggunakan text dummy dari lorem ipsum -->
	<p>lorem ipsum......</p>
    </div>
</body>
</html>

Langkah Kedua

Jika sudah membuat file html seperti diatas tambahkan style CSS seperti berikut:

*{margin:0;padding: 0;box-sizing: border-box;}
.wrapper{
	padding:50px 100px;
	background: #e1dfdf;
}
h3{margin-bottom: 10px;color:#000000;font-size: 30px;}
p{color:#000;font-size: 20px;margin-bottom: 10px;}
::-webkit-scrollbar{width: 0;}
#p-bar{
	position: fixed;
	top:0;
	width: 10px;
	background: linear-gradient(to top, #ff0202, #1d21fd, #ffe300, #16ff02);
}

baiklah jika sudah mengetikkan code CSS selanjutnya menyisipkan library dan script jQuery didalam file HTML seperti dibawah ini:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

	<script>
		$(window).scroll(function(){
			var rollbar = $(window).scrollTop(),
			dh = $(document).height(),
			wh = $(window).height();
			scrollPercent = (rollbar / (dh-wh)) * 100;
			$('#p-bar').css('height', scrollPercent + '%');
		})
	</script>

sekarang simpan file diatas lalu jalankan pada browser masing-masing, kemudian lihat hasilnya akan seperti tampilan berikut:Membuat Scroll Progress Bar Dengan jQuery

Demikian pembahasan kali ini tentang Cara Membuat Scroll Progress Bar Dengan jQuery, semoga bermanfaat dan sampai jumpa dengan pemabhasan lainnya.

terima kasih.