Blog : Cara Membuat Progress/Loading Bar Warna-Warni - RM Tutorial

Terbaru

10 October 2017

Blog : Cara Membuat Progress/Loading Bar Warna-Warni


Bagi yang memiliki website atau blog, tentuk ingin blognya terlihat professioanal dan keren. Banyak hal dilakukan untuk membuat blog tampak lebih bagus, salah satunya dengan membuat efek Loading Bar. Yaa, postingan kali ini berhubungan dengan Loading Bar, namun bukan loading bar biasa melainkan Loading Bar Warna-Warni. Anda mungkin pasti sudah pernah pernah melihat efek ini, anda mungkin ingin blog anda memiliki hal tersebut, ikuti langkah-langkah berikut ini :
      1.      Login ke akun blogger anda
      2.      Pilih Tema -> Edit HTML
      3.      Letakkan script di bawah ini sebelum kode ]]></b:skin>  (klik CTRL+F untuk pencarian)

/* 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}}
4.      @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}}\

      5.      Lalu letakkan script berikut sebelum kode </body>



<script type='text/javascript'>
//<![CDATA[
// Page Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});
//]]>
</script>
      6.      Untuk langkah terakhir letakkan script berikut sebelum kode </header>

<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'/>

      7.      Jangan lupa klik simpan, dan lihat hasilnya.

      Selamat mencoba ,semoga berhasil.