Demo hình ảnh:
Hướng dẫn cách làm:
Việc bạn cần làm là thêm đoạn code này dưới thẻ <body> trong HTML<style>Chúc bạn thành công!
/*
=======================
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>
Không có nhận xét nào:
Đăng nhận xét