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 yang saya bagikan diatas bermanfaat bagi sobat semua. Terima Kasih dan Selamat Mencoba
Posting Komentar