For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Cara membuat loading page pakai efek animasi bergerak diblogger

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

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.