Beranda
Blogger

Cara Membuat Efek Loading Blog Dengan Animasi Circle Keren


Halo sobat blogger bagaimana kabar kalian semua, semoga selalu dalam keadaan sehat ya, oke pada artikel kali ini saya akan membagikan tutorial cara membuat efek loading blog dengan animasi circle.

Pada tutorial ini saya menggunakan dua versi dan dua style. Ada yang menggunakan jQuery dan ada juga yang tidak.

Oh,ya sobat saya belum menjelaskan cara kerja efek ini, efek loading ini nantinya akan tampil pada blog kalian, ketika blog kalian di reload atau di refresh. Langsung saja ikuti step-stepnya dibawah ini.

CARA MEMBUAT ANIMASI LOADING PADA BLOG

1. Silahkan kalian buka dashbord blogger > Tema > Edit HTML

2. Pilih style dibawah ini sesuai selera kalian.

Style Pertama :

Letakan kode dibawah ini persis dibawahnya kode <body>
<div id='af-preloader'>
<div class='af-preloader-wrap'>
<div class='af-sp af-sp-wave'>
</div>
</div>
</div>
Selanjutnya salin kode css dibawah ini dan paste diatas kode ]]></b:skin> 
#af-preloader{width:100%;height:100%;position:fixed;background-color:#4f4a59;z-index:99999999;top:0;left:0}
.af-preloader-wrap{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.af-sp{width:42px;height:42px;clear:both;margin:20px auto}
.af-sp-wave{border-radius:50%;position:relative;opacity:1}
.af-sp-wave:before,.af-sp-wave:after{content:'';border:2px #33b5e5 solid;border-radius:50%;width:100%;height:100%;position:absolute;left:0}
.af-sp-wave:before{transform:scale(1,1);opacity:1;-webkit-animation:spWaveBe .6s infinite linear;animation:spWaveBe .6s infinite linear}
.af-sp-wave:after{transform:scale(0,0);opacity:0;-webkit-animation:spWaveAf .6s infinite linear;animation:spWaveAf .6s infinite linear}
@-webkit-keyframes spWaveAf{from{-webkit-transform:scale(.5,.5);opacity:0}to{-webkit-transform:scale(1,1);opacity:1}}
@keyframes spWaveAf{from{transform:scale(.5,.5);opacity:0}to{transform:scale(1,1);opacity:1}}
@-webkit-keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
@keyframes spWaveBe{from{-webkit-transform:scale(1,1);opacity:1}to{-webkit-transform:scale(1.5,1.5);opacity:0}}
Langkah berikutnya kalian cari kode </body> dan letakan kode dibawah ini tepat diatasnya. 
<script>//<![CDATA[
window.addEventListener('load', function() {
  // document.querySelector('#af-preloader').style.display = 'none'
  document.getElementById('af-preloader').style.display = 'none'
})
//]]></script>
<script>//<![CDATA[
$(window).on('load', function() {
  $('#af-preloader').delay(500).fadeOut('slow')
})
//]]></script>
Terakhir silahkan Reload blog kalian dan lihat hasilnya.

Style Kedua : 

*Note* style kedua ini akan berjalan jika template kalian sudah menggunakan JQuery, Silahkan periksa pada template kalian, jika belum ada silahkan kalian pasang kode jQuery dibawah ini, letakan diatas kode </head> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
Step Selanjutnya kalian cari lagi kode </head> dan letakan kode dibawah tepat diatasnya. 
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:50%;left:49.5%;z-index:1;height:20px;width:20px;transform:translate(-50%,-50%)}
[class^="ball-"]{position:absolute;display:block;left:30px;width:6px;height:6px;border-radius:6px;transition:all 0.5s;animation:circleRotate 4s both infinite;transform-origin:0 250% 0}
@keyframes circleRotate{0%{transform:rotate(0deg)}100%{transform:rotate(1440deg)}}
.ball-1{z-index:-1;background-color:#2196F3;animation-timing-function:cubic-bezier(0.5,0.3,0.9,0.9)}
.ball-2{z-index:-2;background-color:#03A9F4;animation-timing-function:cubic-bezier(0.5,0.6,0.9,0.9)}
.ball-3{z-index:-3;background-color:#00BCD4;animation-timing-function:cubic-bezier(0.5,0.9,0.9,0.9)}
.ball-4{z-index:-4;background-color:#009688;animation-timing-function:cubic-bezier(0.5,1.2,0.9,0.9)}
.ball-5{z-index:-5;background-color:#4CAF50;animation-timing-function:cubic-bezier(0.5,1.5,0.9,0.9)}
.ball-6{z-index:-6;background-color:#8BC34A;animation-timing-function:cubic-bezier(0.5,1.8,0.9,0.9)}
.ball-7{z-index:-7;background-color:#CDDC39;animation-timing-function:cubic-bezier(0.5,2.1,0.9,0.9)}
.ball-8{z-index:-8;background-color:#FFEB3B;animation-timing-function:cubic-bezier(0.5,2.4,0.9,0.9)}
@media screen and (max-width:800px){.spinner{left:43%}}
</style>
Kemudian cari kode <body> dan letakan kode dibawah ini tepat dibawahnya kode tersebut.
<div id='preloader'>
<div class='spinner'>
<span class='ball-1'></span>
<span class='ball-2'></span>
<span class='ball-3'></span>
<span class='ball-4'></span>
<span class='ball-5'></span>
<span class='ball-6'></span>
<span class='ball-7'></span>
<span class='ball-8'></span>
</div>
</div>
Cari kode </body> kemudian paste kode dibawah, dan paste diatasnya. 
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script>
Selesai.. silahkan kalian refresh blog kalian dan lihat hasilnya. 

Demo style kedua, seperti dibawah ini : 

See the Pen
Preloader by Ade Irawan (@ade-irawan)
on CodePen.

Saya ucapkan terimakasih, semoga artikel ini bermanfaat.

Tentang penulis

Hey! I am a Web Design, Graphic Design, UI / UX Design, Material Design, and Content Creator.
#Blogger

Posting Komentar

Tinggalkan komentar sesuai topik tulisan, centang Notify me untuk mendapatkan notifikasi via email ketika komentar kamu di balas.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
© ‧ Bangzilong.xyz
Oops!
Sepertinya ada yang salah dengan koneksi internet Anda. Sambungkan ke internet dan mulai menjelajah lagi.
Pemblokir Iklan Terdeteksi!
Matikan adBlock anda untuk dapat mengakses situs ini.