.png)
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">
<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 komentar :