Cara Membuat Preloader Saat Membuka Website Menggunakan Bootstrap 4
Hallo, balik lagi ditutorial pemrograman Source Code Aplikasi kali ini saya akan menjelaskan mengenai Bagaimana Cara Merancang Preloader Ketika Membuka Situs Menggunakan Bootstrap 4, teman teman pernah melihat sebuah tampilan situs yang kita buka ternyata masih loading dan loading
tersebut menggunakan sebuah animasi yang unik dan menarik sehingga terlihat indah bagi dipandangi hehe .. kira kira seperti itu yah ilustrasi sederhananya, kita akan membangun seperti itu, penasaran gak, gimana sih cara membuatnya apakah sulit? Tak terlalu sulit dan tak terlalu rumit pun bagi menerapkannya, oke kali ini kita akan menggunakan bantuan dari framework bootstrap tepatnya di bootstrap 4 yah, oke untuk teman teman yang belum mengunduh file bootstrapnya dapat didownload terlebih dahulu yah di https://getbootstrap.com/ . oke kalau telah cobat bikin 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>
Seandainya telah disave dan jalankan, oh yah jangan lupa bagi mengunduh file gambar ber extensi gif yah, kalau terdapat error dan tak jalan karenanya pastikan telah menyisipkan file javascriptnya dan link bagi mendirect ke jQuery, pastikan pun teman teman terhubung dengan internet yah.
Oke lumayan gampang bukan, kalau berhasil karenanya hasilnya serperti berikut :
Lumayan demikianlah panduan mengenai Bagaimana Cara Merancang Preloader Ketika Membuka Situs Menggunakan Bootstrap 4. Hingga bertemu diartikel berikutnya dan hingga jumpa.
#KeepLearn
#IsmetMA
Sumber https://kursuswebsite.org
