Cara Membuat Efek Loading Animasi Keren Pada Blog

Kang Muroi May 16, 2018
Banyak tutorial yang memberikan cara membuat efek loading animasi di blogger, namun tidak semuanya yang fast loading atau loadingnya cepat. Disini saya akan sharing tutorial mudah cra menghias blog dengan animasi pada blogspot.

Loading yang saya berikan ini milik salah satu blog yakni Panji.id dan semoga dengan dishare kembali tutorial ini bisa membantu sobat yang ingin memasangnya untuk mempercantik blognya masing-masing.
Membuat Efek Loading Animasi Keren Pada Blog

Efek loading ini juga berguna ketika blog Anda belum termuat seutuhnya dan tidak terlihat acak-acakan ketika sudah memuat seutuhnya tampilan dari blog Anda. Efek inipun hanya menggunakan CSS dan HTML jadi tidak memberatkan loading halaman Anda.

Cara Membuat Efek Loading Animasi Pada Blogspot

Silakan masukkan kode CSS dibawah ini kedalam template HTML Anda.

#page-loader{width:100%;height:100%;background:#2980b9;color:#2980b9;opacity:.99;position:fixed;top:0;left:0;z-index:9999;}
.loading-wrapper{width:250px;position:fixed;top:40%;left:50%;margin-left:-125px;}
.container,.loader,.tp-loader{position:relative;}
.tp-loader{z-index:10000;}
.tp-loader.spinner{width:30px;height:30px;margin:0 auto 10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-animation:tp-rotateplane 1.2s infinite ease-in-out;animation:tp-rotateplane 1.2s infinite ease-in-out;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.loader-job,.loader-name{font-weight:200;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;text-align:center;}
.loader-name{color:#fafafa;opacity:.9;font-size:32px;letter-spacing:-2px;padding-left:2px;padding-right:2px;margin-top:12px;transition:all .4s ease-in-out;}
.loader-job{margin-bottom:40px;margin-top:5px;color:#d8d8d8;font-size:12px;transition:all .4s ease-in-out;}
.loader-left{-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px);opacity:0;}
.loader-right{-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;}
.loader-up{-webkit-transform:translateY(-80px);-moz-transform:translateY(-80px);-o-transform:translateY(-80px);transform:translateY(-80px);opacity:0!important;}
.loader-down{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);opacity:0;}
.loader-hide{opacity:0;}
.loader{display:inline-block;text-align:center;margin:0 auto;width:30px;height:30px;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease;}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in;}
.loader-animation{text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.footer-social-icons a,.social-icons a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;color:#fff;}
@keyframes loader{0%{transform:rotate(0);}25%,50%{transform:rotate(180deg);}100%,75%{transform:rotate(360deg);}}
@keyframes loader-inner{0%,100%,25%{height:0%;}50%,75%{height:100%;}}

Selanjutnya silakan taruh kode HTML dibawah ini tepat dibawah kode <body> atau <body...

<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>WELCOME</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Mohon Tunggu Sebentar</p></strong>
</div></div></div>

Silakan Anda tambahkan script di bawah ini di atas </body>

<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

Selamat mencoba 😑😊.

Thanks to : https://www.mrsdzgn.com
Tags
Jika kamu berencana untuk satu tahun, maka taburlah padi. Jika kamu berencana untuk satu dekade, maka tanamlah pohon. Jika kamu merencanakan seumur hidup, maka didiklah seseorang.

Post a Comment

0 Comments