-->

Menambahkan animasi Loading ketika halaman sedang di muat



pada kesempatan kali ini admin akan membahas cara membuat animasi loading, animasi loading dipakai untuk menunggu halaman kita ketika sedang dimuat, untuk membuatya

pertama buat dulu struktur htmlnya, tambahkan kode berikut di bagian body
<!-- Loading Page -->
<body onload="myFunction()" style="margin:0;">
<div
id="loader"></div>
<div
style="display:none;" id="myDiv" class="animate-bottom">

kemudian buat cssnya seperti berikut
/* Center the loader */

#loader {

position: absolute;

left: 50%;

top: 50%;

z-index: 1;

width: 150px;

height: 150px;

margin: -75px 0 0 -75px;

border: 16px solid #f3f3f3;

border-radius: 50%;

border-top: 16px solid #3498db;

width: 120px;

height: 120px;

-webkit-animation: spin 2s linear infinite;

animation: spin 2s linear infinite;

}



@-webkit-keyframes spin {

0% { -webkit-transform: rotate(0deg); }

100% { -webkit-transform: rotate(360deg); }

}



@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}



/* Add animation to "page content" */

.animate-bottom {

position: relative;

-webkit-animation-name: animatebottom;

-webkit-animation-duration: 1s;

animation-name: animatebottom;

animation-duration: 1s

}



@-webkit-keyframes animatebottom {

from { bottom:-100px; opacity:0 }

to { bottom:0px; opacity:1 }

}



@keyframes animatebottom {

from{ bottom:-100px; opacity:0 }

to{ bottom:0; opacity:1 }

}



#myDiv {

display: none;

}

terakhir javascriptnya
<script>

// Loading Page

var myVar;



function myFunction() {

myVar = setTimeout(showPage, 500);

}



function showPage() {

document.getElementById("loader").style.display = "none";

document.getElementById("myDiv").style.display = "block";

}

</script>


silakan jalankan di browser jika loadingnya muncul berarti anda telah berhasil, selamat mencoba.

0 Response to "Menambahkan animasi Loading ketika halaman sedang di muat"

Post a Comment

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel