Cara Membuat Efek Loading Animasi Keren Pada Blog

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
Reaksi:
Jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat, Anda bisa memberikan donasi melalui Paypal atau dengan Pulsa Dana hasil dari donasi akan digunakan untuk operasioanl Blog Kang Muroi - Terima kasih.

you might ALSO LIKE :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar

0 Response to "Cara Membuat Efek Loading Animasi Keren Pada Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel