Menambahkan animasi Loading ketika halaman sedang di muat
Sep 13, 2017
Add Comment
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.
Autodika.com menyediakan jawaban serta materi seputar tugas kuliah Manajemen Informatika, Sistem Informasi, Teknik Informatika dan berbagai macam tugas kuliah yang berkaitan tentang teknologi.
0 Response to "Menambahkan animasi Loading ketika halaman sedang di muat"
Post a Comment