Cara Membuat Indicator Bars Scroll Halaman

Indicator Bars adalah tampilan bars untuk melihat atau mendapatkan nilai saat terjadi sebuah proses tertentu, misalnya seperti indikator kekuatan password dengan menampilkan sebuah progress bars apakah password yang dibuat kuat atau lemah. Dalam pembahasan artikel ini saya membuat sebuah tampilan indikator dimana saat halaman di scroll secara vertical atau naik turun. Cara Membuat Indicator Bars Scroll Halaman yang harus disiapkan pertama-tama struktur HTMLnya dulu yaaa seperti dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Indicator Scroll Halaman Website</title>
	<link rel="stylesheet" href="style.css">

	<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	<script src="indicator.js"></script>
</head>
<body>
	<div class="container">
		<div id="wrap">
			<h3 class="judul">Chrome Siapkan Pemblokir Iklan</h3>
			<!-- untuk tampilan paragraph dihalaman disesuaikan saja banyak karakter yang dipakai -->
                               <p>
				Saat menjelajah internet lewat browser,
                                kadang ada saja iklan yang kemunculannya memperlambat kinerja peramban karena
                                menyita terlalu banyak sumber daya. <br><br></p>
		</div>
	</div>
	
</body>
</html>

<!DOCTYPE html>

<head>

<title>Membuat Indicator Scroll Halaman Website</title>

</head>

<body>

<h3 class="judul">Chrome Siapkan Pemblokir Iklan</h3>

<p>

Saat menjelajah internet lewat browser,

kadang ada saja iklan yang kemunculannya memperlambat kinerja peramban karena

menyita terlalu banyak sumber daya. <br><br></p>

</div>

</body>

</html>

diatas saya juga menyisipkan library JQuery dan script untuk file indicator.js bisa dilihat code berikut:

var NewScroll = NewScroll || {};

NewScroll.createProgressBar = function(progressBarLocation, contentToTrack) {
  
  // Membuat sebuah div baru dengan id='progress-cont'
  var $progressContElement = $("<div id='progress-cont'></div>");

  // Membuat variable sebuah progress bar dengan id='progress-bar'
  var $progressBarElement = $("<div id='progress-bar'></div>");
  $progressBarElement.css("width", "0%");

  $progressContElement.append($progressBarElement);
  
  var $locationObject = $(progressBarLocation);
  $locationObject.prepend($progressContElement);

  // saat ada event untuk mengupdate value height saat di scroll
  // saat discroll pada halaman untuk melihat tampilan progress bars 
  $(window).scroll(function(e){
    var pageHeight = $(window).height();
    var $container = $(contentToTrack);

    // untuk penyesuaian height saat di scroll
    var adjustedHeight = $container.innerHeight() - pageHeight;
    var progress = (($(window).scrollTop() / adjustedHeight) * 100);
    $progressBarElement.css("width", progress + "%");
  });
}

var NewScroll = NewScroll || {};

NewScroll.createProgressBar = function(progressBarLocation, contentToTrack) {

// Membuat sebuah div baru dengan id='progress-cont'

var $progressContElement = $("<div id='progress-cont'></div>");

// Membuat variable sebuah progress bar dengan id='progress-bar'

var $progressBarElement = $("<div id='progress-bar'></div>");

$progressBarElement.css("width", "0%");

$progressContElement.append($progressBarElement);

var $locationObject = $(progressBarLocation);

$locationObject.prepend($progressContElement);

// saat ada event untuk mengupdate value height saat di scroll

// saat discroll pada halaman untuk melihat tampilan progress bars

$(window).scroll(function(e){

var pageHeight = $(window).height();

var $container = $(contentToTrack);

// untuk penyesuaian height saat di scroll

var adjustedHeight = $container.innerHeight() - pageHeight;

var progress = (($(window).scrollTop() / adjustedHeight) * 100);

$progressBarElement.css("width", progress + "%");

});

}

dan tambhakan sedikit style CSS untuk mempertegas tampilannya coba lihat seperti dibawah ini

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
*{
	margin:0;
	padding:0;
	font-family: 'Roboto Mono', monospace;
}
#wrap{
	width: 700px;
	margin: 0 auto;
	padding:100px 0;
}
#wrap h3{
	margin:0;
	padding:0;
	font-size: 35px;
}
#wrap p{
	margin:0;
	padding:0;
	font-size: 17px;
}
 
/* Untuk CSS Indicator dgn progress-bar */
#progress-cont {
  height: 7px;
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
}

#progress-bar {
  height: 100%;
  background-color: #ff5000;
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

margin:0;

padding:0;

font-family: 'Roboto Mono', monospace;

}

#wrap{

width: 700px;

margin: 0 auto;

padding:100px 0;

}

#wrap h3{

margin:0;

padding:0;

font-size: 35px;

}

#wrap p{

margin:0;

padding:0;

font-size: 17px;

}

/* Untuk CSS Indicator dgn progress-bar */

#progress-cont {

height: 7px;

position: fixed;

width: 100%;

top: 0px;

left: 0px;

}

#progress-bar {

height: 100%;

background-color: #ff5000;

}

Jika sudah dan jangan dilupakan kode javascriptnya dibawah ini;

<!-- Script untuk tampilan Indicator saat scroll halaman-->
	<script type="text/javascript">
		NewScroll.createProgressBar(".container","#wrap");
	</script>

NewScroll.createProgressBar(".container","#wrap");

</script>

script diatas berhubungan dengan file indicator.js yang berada diatas, coba sekarang jalankan pada browser apakah tampilannya seperti ini:

Demikian pembahasan artikel kali ini Cara Membuat Indicator Bars Scroll Halaman, semoga bermanfaat dan sampai jumpa dengan kasus-kasus lainnya.

terima kasih

Facebook DUMET School

Categories