Preload animasi Blog
Untuk membuat animasi Loader pada blog,
yang dibutuhkan html css js yang paling penting jsnya, js ini universal bisa kalian gunakan pada animasi loader apapun, Metode yang dipakai ada dua tipe yaitu
tipe 1: dengan menambahkan class baru yang merupakan class dengan css .hide{ display:none;} ketika web sudah diload
contoh :
<div class='preloader'>
isi loader
</div>
const preloader = document.querySelector(".preloader");//target yang akan diambil
// dibawah ini adalah function
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide"); // menambahkan class hide pada container class='preloader'
}, 5000); // jeda ketika menghilang 5000 = 5detik
}
window.addEventListener("load", hidePreloader); // function dijalankan setelah halaman diload (load).
tipe 2: dengan menambahkan style css langsung tanpa menambahkan class
contoh : window.onload = function(){ document.querySelector(".preloader").style.display = "none" }
perhatikan class preloader, itu adalah class dari container loader.
ada banyak style loader yang kalian bisa cari di berbagai website
- sliderrevolution
- cssloaders
- codepen
animasi loader diwebsite ini kudapat dicodepen.
berikut kodenya
Letakan kode ini dibawah <body>
html
<div class='preloader'>
<div class='dots-container'>
<div class='dot red'/>
<div class='dot green'/>
<div class='dot yellow'/>
</div>
<div class='preloader-text'>
Loading...
</div>
</div>
<style>
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #0f0f0f;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;}
.preloader.hide {
opacity: 0;
pointer-events: none;}
.preloader .preloader-text {
color: #838383;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 15px;}
.preloader .dots-container {
display: flex;
margin-bottom: 48px;}
.preloader .dot {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;}
.preloader .dot.red {
background: #ef476f;
animation: bounce 1000ms infinite;}
.preloader .dot.green {
background: #06d6a0;
animation: bounce 1000ms infinite;
animation-delay: 200ms;}
.preloader .dot.yellow {
background: #ffd166;
animation: bounce 1000ms infinite;
animation-delay: 400ms;}
@keyframes bounce {
50% {
transform: translateY(16px);}
100% {
transform: translateY(0);}}
</style>
<script>
/*<![CDATA[*/
const preloader = document.querySelector(".preloader");
const preloaderDuration = 500;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
/*]]>*/
</script>
dan untuk Membuat loader muncul hanya di homepage dan archive maka kita letakan kode loader pada cond Homepage dan MultipleItem
contoh seperti ini
<b:if cond='data:view.isHomepage or data:view.isMultipleItems'> letakan kode loader kesini, setelah itu pasang dibawah <body> </b:if>
html
<b:if cond='data:view.isHomepage or data:view.isMultipleItems'>
<div class='preloader'>
<div class='dots-container'>
<div class='dot red'/>
<div class='dot green'/>
<div class='dot yellow'/>
</div>
<div class='preloader-text'>
Loading...
</div>
</div>
<style>
.preloader {
position: fixed;
width: 100%;
height: 100vh;
background: #0f0f0f;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;}
.preloader.hide {
opacity: 0;
pointer-events: none;}
.preloader .preloader-text {
color: #838383;
text-transform: uppercase;
letter-spacing: 8px;
font-size: 15px;}
.preloader .dots-container {
display: flex;
margin-bottom: 48px;}
.preloader .dot {
background: red;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 5px;}
.preloader .dot.red {
background: #ef476f;
animation: bounce 1000ms infinite;}
.preloader .dot.green {
background: #06d6a0;
animation: bounce 1000ms infinite;
animation-delay: 200ms;}
.preloader .dot.yellow {
background: #ffd166;
animation: bounce 1000ms infinite;
animation-delay: 400ms;}
@keyframes bounce {
50% {
transform: translateY(16px);}
100% {
transform: translateY(0);}}
</style>
<script>
/*<![CDATA[*/
const preloader = document.querySelector(".preloader");
const preloaderDuration = 500;
const hidePreloader = () => {
setTimeout(() => {
preloader.classList.add("hide");
}, preloaderDuration);
}
window.addEventListener("load", hidePreloader);
/*]]>*/
</script>
</b:if>
.preloader {
position:absolute;
width: 100%;
height:auto;
background: #0000;
left:50%;
top: 0%;
transform: translateX(-50%)
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: all 400ms;
z-index: 2000;}
nanti kubuat pasang diwidget (harus ada video biar lebih jelas).