SHARE HIỆU ỨNG LOADING TUYỆT ĐẸP CHO BLOG
Xuất bản:
TẢN MẠN
Hello, xin chào tất cả các bạn đã quay trở lại với blog của mình !!! Nhân ngày lễ Quốc Khánh (02-09) được nghỉ ở nhà, không đi chơi đâu nên ngồi viết bài - gọi là có tý quà hihi. Không liên thiên nữa thì hôm nay mình xin phép chia sẻ hiệu ứng load trang cực kì cute :)
THÔNG TIN CODE
- Code Name : Effect Loading
- Responsive : Có
- Develop : Trần Thanh Bình
- Edit & Upgrade : Nguyễn Dương Hoàng Thành
THỰC HÀNH
Rất là đơn giản, đơn giản vô cùng luôn !!! Các bạn chỉ cần chèn code bên đoạn code bên dưới vào ngay sau thẻ <body> hoặc <body
<!-- Bắt đầu loading -->
<style>
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-webkit-keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}500%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
@keyframes pulse{from{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
to{-webkit-transform:scale3d(0.068,0.068,0.068);transform:scale3d(0.068,0.068,0.068)}}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
#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:#000000;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:#ff0050}
.loading-page .counter h1{color:#fff;font-size:60px;margin-top:-10px}
.loading-page .counter hr{background:#ff0000;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:#ff0050}
</style>
<!-- Preloader -->
<div id='preloader'>
<div class='loading-page'>
<div class='counter'>
<p><a href='//fb.com/www.leanhduc.xyz' style='color:#fff'><b target='blank' title='Click Now'><span style='background: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEgxiv9BesRNunnCW8QHW31LiT3mXpm3-DKM1gzwtdySYiFbXUg0q8EpmDJBYi_RT0G_ZU7_3P8oik9h_5nxiyVvdX9aFZs13GUKPFCHD5yll-aWM81-ihjEz4C-5vzu2dSbhs3OE4e0dV_M6QiUH8sQ0CgbrpK7BDO5gnm_TjZ3p2o=s0-d") repeat scroll 0% 0% transparent; color:#ff0000; text-shadow: 0pt 0pt #ff0000, 0pt 1pt 0.3em #ff0000;'><i class='fa fa-heart animated infinite pulse'/></span></b></a></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>
<!-- kết thúc Loading -->
LỜI KẾT
Nếu thầy bài viết hay và hữu ích thì tiếc gì một click quảng cáo nhỉ :v Click để mình có động lực viết bài tiếp nha <3
Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!! Xin chào và hẹn gặp lại trong bài viết lần sau hihi :)
Để anh kể cho chú nghe về một huyền thoại top 1 comment ahaha =))
Trả lờiXóakhá vl... nhanh đến kinh dị...tui vừa mới xuất bản mà =ask
XóaHồi trước có duyên với Đức lắm...h lại có duyên với bác rồi hahah...chắc phải offine buổi :D đều ở Hà Nội mà nhỉ
Xóahaha vậy chế có duyên với blog này rồi chứ chẳng phải riêng ai...không làm blogger mà chăm comment quá haha...có duyên sẽ offline với chế buổi <3 Nhất định là vậy kakak (y)
XóaCái này rất khó chiệu đối với người dungg
Trả lờiXóaDạ nhìn nó đẹp hahha. Ai thích thì dùng
XóaHổng có saooo....ai thích thì sài thôi em ơi =))
Xóabài mới đi
Trả lờiXóabài này vừa mới ra hôm qua mà bác @@
Xóanảy em nhấn ads ủng hộ anh rồi í
Trả lờiXóaem đáng yêu lắm ý haha <3
Xóanhớ ủng hộ em để em lấy mã pin nha :V
Xóa10$ là nó gửi mã về akaka...nhưng mà chờ nó về đến nhà thì hơi gian nan :D
Xóavậy 10$ là rút được rồi hả anh
Xóa100$ cơ anh ơi...10$ mới chỉ là xác minh địa chỉ thôi =))
Xóaok bác...đã cập nhật thông tin code =))
Trả lờiXóa