Hello sobat IcloudZer jumpa lagi berasa admin, sekarang masih suasana tahun baru semoga tahun ini menjadi tahun yang penuh berkah bagi orang orang yang mengharapkannya, baiklah kali ini admin akan membahas bagaimana sih caranya membuat Preloader pakai animasi diblogger
Info: Jika kamu sudah penasaran, yuk langsung aja kita bahas bersama sama okok, okay maksudnya
Preloader
Preloader sangat berguna sekali apabila diterapkan didalam blog yang kamu kelola, soalnnya dengan menggunakan Preloader didalam blog akan membuat tampilan blog semakin kece, dan membuat blog lebih tampak berkesan
Responsif
Jika kamu menggunakan Preloader didalam blog kamu, maka tidak membuat blog kamu itu menjadi lambat, soalnya Preloader yang sedang sayabbahas ini sangat responsif pada kecepatan dan juga sangat responsif pada tampilan baik mobile dan juga desktop
Sangat disarankan: Agar kamunya membaca artikel ini hingga selesai oke
Cara pembuatan
Baiklah sekarang admin bakalan memberikan informasi mengenai bagaiamana caranya membuat Preloader keren diblogger pakai efek animasi CSS bergerak
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini, kemudian kamu bisa menempelkannya diatas kode ]]></b:skin>
/* Preloader by Icloudice */
#rahPreloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.rahCnt{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;text-align:center}
.rahLicensi{position:absolute;top:5px;right:5px; font-weight:bold}
.rahLoader{height:20px;width:250px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}
.rahMoving-dot{animation-name:loader;animation-timing-function:ease-in-out;animation-duration:3s;animation-iteration-count:infinite;height:20px;width:20px;border-radius:100%;background-color:black;position:absolute;border:2px solid white}
.rahMoving-dot:first-child{background-color:#8cc769;animation-delay:0.5s}
.rahMoving-dot:nth-child(2){background-color:#8c6daf;animation-delay:0.4s}
.rahMoving-dot:nth-child(3){background-color:#e8ad11;animation-delay:0.3s}
.rahMoving-dot:nth-child(4){background-color:#f9a74b;animation-delay:0.2s}
.rahMoving-dot:nth-child(5){background-color:#f80000;animation-delay:0.1s}
@keyframes loader{15%{transform:translateX(0)}45%{transform:translateX(230px)}65%{transform:translateX(230px)}95%{transform:translateX(0)}}Info: Atau kamunya juga bisa menggunakan tag kode <style>
Kode HTML
Langkah selanjutnya adalah kamu bisa menyalin kode HTML dibawah ini kemudian kamu bisa menempelkannya diatas kode </body>
<div id='rahPreloader'>
<div class='rahCnt'>
<span class='rahLicensi' id='mscontent'/>
<div class='rahLoader'>
<div class='rahMoving-dot'></div>
<div class='rahMoving-dot'></div>
<div class='rahMoving-dot'></div>
<div class='rahMoving-dot'></div>
<div class='rahMoving-dot'></div>
</div>
</div>
</div>Info: Untuk fungsi kode HTML diatas adalah untuk menampilkan kode CSS tersebut
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode javascript dibawah ini kemudian kamu bisa meletakkannya diatas kode </body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
/*<![CDATA[*/
$(window).bind("load", function () {jQuery(".rahCnt").fadeOut("slow");jQuery("#rahPreloader").delay(0).fadeOut();});$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #fefefe!important').html('Created with <i style="color:#f80000;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 12px!important; color: #161617!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)}); /*]]>*/</script>Info: Fungsi dari kode javascript diatas adalah untuk membuat kestabilan pada Preloader nya
Contoh Tampilan
Baiklah admin akan memberikan contoh demo dari Preloader nya, jika kamu ingin melihatnya kamu bisa merefresh halaman ini okay
