2020/02/23

Cara Membuat Efek Pemuatan Keren Untuk Halaman Web #1


Cara Membuat Efek Pemuatan Keren Untuk Halaman Web #1 - Hallo sobat blogger, pada kesempatan ini saya akan membagikan tutorial tentang cara membuat efek pemuatan keren di blog. Tutorial ini hampir sama dengan tutorial yang saya bagikan sebelumnya yaitu Cara Membuat Efek Pemuatan Keren Untuk Blogspot #2, tapi ada sedikit perbedaan dan untuk demonya seperti gambar diatas.

Cara Memasang Efek Pemuatan Keren Di Blog
Yang perlu sobat lakukan adalah menambahkan kode di bawah ini sebelum tag </body>

<style>
/*
=======================
Preloader
=======================
*/
#preloader{position:fixed;top:0;left:0;height:100%;width:100%;background-color:#fff;z-index:9999999999;background-repeat:no-repeat;background-position:center center;font-family:Open Sans,sans-serif}
blockquote{font-size:inherit}
.loading-page{background:#0d0d0d;width:100vw;height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
.loading-page .counter{text-align:center}
.loading-page .counter p{font-size:40px;font-weight:100;color:#E6AF2A}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#E6AF2A;border:none;height:2px;float:left}
.loading-page .counter{position:relative;width:200px}
.loading-page .counter h1.abs{position:absolute;top:0;width:100%}
.loading-page .counter .color{width:0;overflow:hidden;color:#E6AF2A}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p>loading</p>
<h1>0%
<!-- h1.abs loading h1.abs.color loading -->
</h1>
<hr/>
</div>
</div>
</div>
<script type='text/javascript'>//<![CDATA[
// Loader
var counter = 0;
var c = 0;
var i = setInterval(function(){
$(".loading-page .counter h1").html(c + "%");
$(".loading-page .counter hr").css("width", c + "%");
counter++;
c++;
if(counter == 101) {
clearInterval(i);
$("#preloader").delay(100).fadeOut(500);
}
}, 50);
//]]></script>

Dan terakhir klik "Simpan"

Demikian artikel dari saya tentang Cara Membuat Efek Pemuatan Keren Untuk Halaman Web #2, Semoga artikel diatas bermanfaat bagi sobat semua. Terima Kasih dan Selamat Mencoba

Tags :

bm
@anaz_arblit

Hanya Seorang Blogger dan Content Writer yang senang mempelajari dan berbagi Informasi, Tutorial dan seputar Dunia Internet. Jika anda ingin bekerjasama dengan kami, Silahkan Hubungi kami melalui Email : Themeblitz@gmail.com.

Post a Comment