Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / android / Blogger / CSS / HTML / Tutorial

Cara Mudah Membuat Efek Loading Animasi Pada Blogspot

Oleh Anonim Posting Komentar
Banyak orang di luar sana 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 sudah di share oleh Kangian. Tutorial ini saya ambil untuk membagikan tutorial yang menurut saya bermanfaat.

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 ^_^.

Posting Komentar untuk "Cara Mudah Membuat Efek Loading Animasi Pada Blogspot"