Hello sobat IcloudZer kali ini admin akan memberikan informasi bagaiamana caranya membuat loading page pakai animasi bergerak diblogger, dan animasi tersebut dibuat menggunakan kode CSS
Info: Jika kamunya sudah penasaran, yuk deh langsung aja kita mulaikan pembahasannya oke
Loading Page
Sebenarnya apa sih loading page tersebut? Loading page adalah suatu tampilan lainnya dari sebuah website, pada saat website tersebut memuat data secara keseluruhan maka loading page ini akan dimunculkan, sambil menunggu waktu jeda pemuatan data website
Info: Atau secara simplenya ketika website di refresh maka tampilan loading pagenya akan muncul
Responsif
Seperti yang sudah saya jelaskan sebelumnya, bahwa loading page animasi bergerak keren diblogger ini dibuat menggunakan kode CSS saja! Jadi tampilan dari loading animasi benar benar responsif, responsif pada performa blog dan juga responsif pada tampilan loadingnya
Cara pembuatan
Baiklah sekarang saatnya admin akan membahas bagaiamana caranya membuat loading page menggunakan animasi bergerak yang dibuat menggunakan kode CSS, harap disimak dan pelajari melalui artikel ini hingga selesai ok, agar tidak salah paham
Kode CSS
Langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan kode nya diatas kode ]]></b:skin>
#rah-loader-overlay {position: fixed;top: 0;left: 0;right: 0;width:100%;height: 100%;background-color:#fefefe;z-index:1015;}
.rah-loader-overlayy{position: absolute;right:5px;font-text:12px;top:5px;}
.rah-loader-overlay {display: inline-block;z-index: 1016;position:fixed;top: calc(50% - 29px);left: calc(50% - 29px);color:#7163cf;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.rah-loader-overlay div{position: absolute;animation: loader-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;border: 4px solid;border-radius:50%;opacity: 1;}.rah-loader-overlay div:nth-child(2) {
animation-delay: -0.5s;}
@keyframes loader-ripple {0% {top: 28px;left: 28px;opacity: 1;height: 0;width: 0;}100% {top: -1px;left: -1px;opacity: 0;height: 58px;width: 58px;}}Info: Atau kamu juga bisa menggunakan tag kode <style>
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode HTML berikut ini, kemudian kamu bisa meletakkannya diatas kode </body>
<div id="rah-loader-overlay">
<div class="rah-loader-overlayy" id="mscontent"/>
</div>
<div class="rah-loader-overlay">
<div>
</div>
<div>
</div>
</div>Info: Fungsi dari kode HTML diatas adalah untuk menampilkan loading pagenya okay
Kode Javascript
Langkah selanjutnya yang biaa kamu lakukan adalah menyalin lagi kode javascript dibawah ini, kemudian kamu biaa 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(".rah-loader-overlay").fadeOut("slow");jQuery("#rah-loader-overlay").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: 13px!important; color: #fefefe!important').html('Created with <i style="color:#fefefe;-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: 13px!important; color: #333!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)}); /*]]>*/</script>Info: Kode javascript diatasi berfungshi untuk membantu menyetabilkan performa dari loading pagenya
Contoh Tampilan
Jika kamu penasaran bagaimana sih tampilan dari loading blog nya kamu bisa melihat pada loading page yang sedang admin gunakan sekarang ini