Hello sobat icloudZer kali ini admin bakalan memberikan informasi mengenai bagaimana caranya membuat animasi preloader yang ringan di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas secara bersama sama
Preloader
Admin sangat sering sekali mebahas mengenai preloader, seperti bagaimana caranya membuat preloader di blog, bagaimana caranya membuat loading animasi page di blogger dan sebagainya, bahkan pada setiap artikel yang admin posting mengenai maslaah preloader, tampilan pada masing masing preloader selalu berbeda dan pasti memiliki keunikan tersendiri bagi setiap preloader yang admin jabarkan di sini
Fungsi Preloader
Mungkin sampai saat ini kamu masih belum mengetahui apa sih fungsi dari preloader? secara gampangnya fungsi dari preloader adalah untuk membuat tampilan blog semakin menarik dengan menggunakan animasi preloader tersebut membuat pengunjung blog tidak akan merasa bosan tentunya
Sedangakan cara kerja dari preloader adalah tampilan preloader akan muncul pada saat halaman blog di refresh alias di muat ulang, maka ketika halaman di refresh preloader yang sudah kita install di dalam source template akan muncul dengan syarat layout kode dan source kodenya benar alias tidak salah hehehe
Cepat dan ringan
Preloader yang admin jabarkan di sini memiliki tampilan yang keren selain keren juga memiliki kecepatan loading yang luar biasa sehingga anda tidak perlu khawatir mengenai blog anda yang menjadi lambat saat menggunakan preloader ini, mengapakah preloader bisa menjadi cepat? simple pembuatan preloader tersebut menggunakan CSS dan tambahan animasi CSS murni, sedangakn penggunaan kode javascript hanya untuk menjalankan fungsi CSS saja
Contoh Tampilan
Jika kamu sudah penasaran bagaimana dengan contoh tampilan dari preloader tersebut kamu bisa merefresh ulang halaman ini, atau gunakan tombol di bawah ini untuk melihat contoh demo pergerakan animasi preloader tersebut
Info: Preloader tersebut sangat cepat saat proses pemuatan data dilakukan (refresh )
Cara pembuatan
Baiklah sobat icloudZer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana sih caranya membuat preloader yang ringan di blog, perhatikan setiap langkah langkah yang admin berikan sebentar lagi
Kode CSS
Seperti biasanya langkah pertama yang bisa kamu lakukan untuk membuat tampilan preloader tersebut, salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>
.rah-pldW{position:fixed;top:0;left:0;bottom:0;right:0;z-index:990;display:flex;background:#fefefe;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:center;align-items:center}
.rah-pldW.flat{background:#f2f2f2}
.rah-pldW.fadeOut{animation:rahFadeOut 1s backwards}
.rah-pldW.hidden{display:none}
.rah-pldW .crcl{width:70px;position:relative;display:flex;flex-wrap:wrap;margin-bottom:-15px;justify-content:center;align-items:center}
.crcl .r, .crcl .g, .crcl .y, .crcl .b{position:relative;width:10px;height:10px;border-radius:10px;margin:2px}
.crcl .r{background-color:#ea4335;animation:rahmovingUp 0.5s infinite alternate}
.crcl .b{background-color:#4285f4;animation:rahmovingUp 0.5s 0.2s infinite alternate}
.crcl .g{background-color:#34a853;animation:rahmovingUp 0.5s .5s infinite alternate}
.crcl .y{background-color:#fbbc05;animation:rahmovingUp 0.5s .7s infinite alternate}
.rah-pldW .crcl.style-2{width:50px;justify-content:center;margin-bottom:0}
.crcl.style-2 .r, .crcl.style-2 .g, .crcl.style-2 .b, .crcl.style-2 .y{margin:5px} .crcl.style-2 .r{animation:movingRed 1s infinite alternate}
.crcl.style-2 .b{animation:rahmovingBlue 1s infinite alternate}
.crcl.style-2 .g{animation:rahmovingGreen 1s infinite alternate}
.crcl.style-2 .y{animation:rahmovingYellow 1s infinite alternate}
.dark-mode .rah-pldW{background:rgba(0, 0, 0, 0.9)} .dark-mode .rah-pldW.flat{background:#242526}
@keyframes rahFadeOut{0%{opacity:1;visibility:visible} 85%, 100%{opacity:0;visibility:hidden}}
@keyframes rahmovingUp{from{top:0px} to{top:-15px}} @keyframes movingRed{from{top:0px;left:0px} to{top:15px;left:15px}}
@keyframes rahmovingYellow{from{top:0px;left:0px} to{top:-15px;left:-15px}}
@keyframes rahmovingGreen{from{top:0px;left:0px} to{top:-15px;left:15px}}
@keyframes rahmovingBlue{from{top:0px;left:0px} to{top:15px;left:-15px}}Info: Atau kamu bisa menggunakan kode <style> untuk meletakkan kode CSS di atas
Kode HTML
Langkah selanjutnya untuk membuat preloader yang ringan lagi cepat di blog kamu bisa menyalin kode HTML di bawah ini kemudian letakkan di bawah kode <body>
<!-- Preloader by icloudice.com -->
<div class="rah-pldW">
<div class="crcl style-2">
<div class="r">
</div>
<div class="b">
</div>
<div class="g">
</div>
<div class="y">
</div>
</div>
</div>Info: Fungsi dari kode HTML di atas adalah untuk menampilkan fungsi tampilan dari preloader tersebut
Kode Javascript
Lagkah terakhir untuk membuat preloader di dalam blog, kamu bisa menyalin lagi kode javascript di bawah ini, kemudian letakkan di atas kode </body> atau sesudah kode <body>
<script>
/*<![CDATA[*/ eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('0(\'1\',2(){3 a=4.5(\'.6-7\');a.8.9(\'b\',\'c\')});',13,13,'addEventListener|DOMContentLoaded|function|var|document|querySelector|rah|pldW|classList|add||fadeOut|hidden'.split('|'),0,{})) /*]]>*/
</script>Info: Fungsi dari kode Javascript di atas adalah untuk menajalankan fungsi kode CSS dari preloader tersebut
