Cara Membuat Efek Loader Berwarna - Selain berfungsi sebagai icon loading blog, imbas loader berwarna ini juga sanggup mempercantik tampilan blog. Efek loader berwarna ini sudah digunakam oleh google dan banyak situs lainnya, ibarat Arlina Design.
Dulu animasi loading dibentuk memakai gambar animasi berekstensi gif, lalu gambar diletakan pada halaman yang ingin dimunculkan animasi loading. Tapi seiring berkembangnya dunia web development, kini imbas loading sanggup dibentuk memakai css dan perhiasan javascript.
Pada kesempatan ini aku akan menyebarkan tutorial cara menciptakan imbas loader berwarna pada blog. Efek loader ini akan muncul sempurna di bawah header dikala blog sedang entransfer data dari source. Dengan menampilkan animasi warna yang sanggup mempercantik tampilan blog. Demo imbas loader berwarna ini sanggup dilihat di blog saya.
Cara Membuat Efek Loader Berwarna
Berikut langkah menciptakan imbas loader berwarna pada blogLangkah Pertama
Simpan aba-aba berikut sempurna di atas ]]></b:skin>
/* Riswan Net Page Loader */ .cssload-loader{position:absolute;bottom:0;left:0;right:0;margin:auto;z-index:1000} myloader [role="progressbar"][aria-busy="true"]{position:absolute;top:0;left:0;padding-bottom:3px;width:100%;background-color:#159756;-webkit-animation:preloader-background linear 3.5s infinite;animation:preloader-background linear 3.5s infinite} myloader [role="progressbar"][aria-busy="true"]::before,myloader [role="progressbar"][aria-busy="true"]::after{display:block;position:absolute;top:0;z-index:2;width:0;height:3px;background:#afa;-webkit-animation:preloader-front linear 3.5s infinite;animation:preloader-front linear 3.5s infinite;content:''} myloader [role="progressbar"][aria-busy="true"]::before{right:50%} myloader [role="progressbar"][aria-busy="true"]::after{left:50%} @-webkit-keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @keyframes preloader-background{0%,24.9%{background-color:#159756}25%,49.9%{background-color:#da4733}50%,74.9%{background-color:#3b78e7}75%,100%{background-color:#fdba2c}} @-webkit-keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}} @keyframes preloader-front{0%{width:0;background-color:#da4733}24.9%{width:50%;background-color:#da4733}25%{width:0;background-color:#3b78e7}49.9%{width:50%;background-color:#3b78e7}50%{width:0;background-color:#fdba2c}74.9%{width:50%;background-color:#fdba2c}75%{width:0%;background-color:#159756}100%{width:50%;background-color:#159756}}Langkah Kedua
Kemudian letakan aba-aba berikut sebelum tag epilog </body>
<script type='text/javascript'> //<![CDATA[ // Page Loader $(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)}); //]]> </script>Langkah Ketiga
Selanjutnya letakan aba-aba javascript berikut di bawah header atau di bab di mana imbas loading akan muncul. Contoh aku meletakannya di bawah script menubar.
<div class='cssload-loader' id='loader'><myloader> <div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'/> </myloader></div> <div class='page-loader' id='pagingx'/> |
| Cara Membuat Efek Loader Berwarna |
Terakhir simpan template
Nah sekian tutorial cara menciptakan imbas loader berwarna pada blog. Semoga tutorial singkat ini sanggup membantu teman blogger semua dalam meningkatkan blognya. Apabila aku salah atau ada yang kurang jangan lupa untuk mengingatkan aku di komentar. Terima Kasih.
