Membuat Menu Page Loader Menggunakan Css Di Blog

Hallo shobat blog, kali ini saya akan coba membagikan Cara Membuat Menu Page Loader Menggunakan Css Di Blog, nah menu page loader ini berguna untuk menampilkan blog saat masih dalam proses loading. page loader kali ini menurut saya cukup ringan untuk di pasang pada blog, karena saya sendiri sudah memasangnya. di mana bisa membuat tampilan blog jadi lebih mewah, rapi terlihat prefesional.
nah jika buat kamu yang ingin menerapkan Menu Page Loader Menggunakan Css Di Blog ini, silahkan kamu ikuti tutorialnya di bawah ini.

Result

Membuat Menu Page Loader Menggunakan Css Di Blog

1.Silahkan kamu masuk ke Blogger>Tema>Edit Html Lalu pastekan kode berikut tepat sebelum kode ]]></b:skin>atau</style>Untuk mempercepat pencarian silahkan kamu klik

CTRL

+

F

Pada keyboard kamu.

/* 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}}

Lalu silahkan kamu cari kode
<header, Silahkan Pastekan kode di bawah tepat 3 baris sebelum kode <header

<div class='cssload-loader' id='loader'><myloader>
<div aria-busy='true' aria-label='Loading, please wait.' role='progressbar'></div>
</myloader></div>
<div class='page-loader' id='pagingx'></div>

Jika suda, pasang Script di bawah ini tepat sebelum kode </body>

// Loader
$(document).ready(function(){$("body").removeClass("page-isload"),$("#pagingx").fadeOut(8000),$("#loader").fadeOut(8000)});

Jika menemukan kendala pemasangan silahkan berkomentar. Karena masing-masing template memiliki konstribusi html yang berbeda

Terakhir klik save/simpan. Oky mungkin sampe sini, semoga berhasil yaa

Artikel Terkait