Cara Membuat Preloader Saat Membuka Website Menggunakan Bootstrap 4

Hallo, balik lagi ditutorial pemrograman Dumet School kali ini saya akan menjelaskan tentang Bagaimana Cara Membuat Preloader Saat Membuka Website Menggunakan Bootstrap 4, teman teman pernah melihat sebuah tampilan website yang kita buka ternyata masih loading dan loading

tersebut menggunakan sebuah animasi yang unik dan menarik sehingga terlihat indah untuk dipandangi hehe .. kira kira seperti itu yah ilustrasi sederhananya, kita akan membuat seperti itu, penasaran gak, gimana sih cara membuatnya apakah sulit? Tidak terlalu sulit dan tidak terlalu rumit juga untuk menerapkannya, oke kali ini kita akan menggunakan bantuan dari framework bootstrap tepatnya di bootstrap 4 yah, oke bagi teman teman yang belum mendownload file bootstrapnya bisa didownload terlebih dahulu yah di https://getbootstrap.com/ . oke jika sudah cobat buat file baru beri nama terserah teman teman, dan tambahkan script berikut :

<div id="loading"></div>
		<div class="container-fluid">
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						<img src="https://school.codepolitan.com/resources/themes/default/assets/img/icon-mug.png" class="img-fluid">
						<h1>lorem ipsum</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sunt, quod minus quidem iure ducimus qui ad temporibus dignissimos nam tempora! Eligendi consequatur, at praesentium voluptate id suscipit reprehenderit nam!</p>
					</div>
					<div class="col-md-4">
						<img src="https://school.codepolitan.com/resources/themes/default/assets/img/icon-keyboard.png" class="img-fluid">
						<h1>lorem ipsum</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint fugit odio, at, eveniet laudantium, molestiae ea quam doloremque sapiente dignissimos modi minus natus delectus alias voluptatum omnis sunt esse. Debitis.</p>
					</div>
					<div class="col-md-4">
						<img src="https://school.codepolitan.com/resources/themes/default/assets/img/icon-lamp.png" class="img-fluid">
						<h1>lorem ipsum</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore quasi sapiente voluptatibus, placeat dolorem deleniti repudiandae quis quisquam. Sit nisi ducimus exercitationem error veritatis at ex aliquam assumenda cum eos!</p>
					</div>
				</div>
			</div>
		</div>

masukkan style :

position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 800; 

					background: url(dropbox.gif) 50% 50% no-repeat; background-color: #FFFFFF; opacity:0.9;

dan masukkan script pendukungnya :

<script src=”http://code.jquery.com/jquery-latest.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script>
<script>
$(window).load(function(){
$(“#loading”).fadeOut(“slow”, 2);
});
</script>

Jika sudah disave dan jalankan, oh yah jangan lupa untuk mendownload file gambar ber extensi gif yah, jika terdapat error dan tidak jalan maka pastikan sudah menyisipkan file javascriptnya dan link untuk mendirect ke jQuery, pastikan juga teman teman terhubung dengan internet yah.

Oke cukup mudah bukan, jika berhasil maka hasilnya serperti berikut :

Cukup sekian tutorial tentang Bagaimana Cara Membuat Preloader Saat Membuka Website Menggunakan Bootstrap 4. Sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA