Hiệu ứng load trang là khi bạn truy cập vô trang web hoặc blog thì trong quá trình tải trang sẽ xuất hiện biểu tưởng icon loading, khi trang tải xong dữ liệu thì icon loading sẽ ẩn đi. Tạo hiệu ứng cho trang web đẹp mặt khi chờ đợi trang tải xong.
Đầu tiên là các icon loaing
Và có rất nhiều icon loading dạng .gif được chia sẻ trên mạng các bạn có thể tìm thêm.
1. Các bạn thêm CSS trước </head>
<style>
#status {
width: 200px;
height: 200px;
position: fixed;
left: 50%;
z-index: 100;
top: 50%;
background-image: url(LINK ICON);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
z-index: 1001
}
#loader {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #FFF;
z-index: 1000
}
</style>
2. Thêm jQuery trước </body>
<script>
//<![CDATA[
$(window).bind("load", function() {
jQuery("#status").fadeOut();
jQuery("#loader").fadeOut();
});
//]]>
</script>
3. Thêm HTML dưới <body>
<div id='status'></div>
<div id='loader'></div>
Các bạn copy link icon loading dạng .GIF thay vô CSS bên trên chỗ mình tô đen. Sau đo các bạn lưu lại và kiểm tra trang web trên trình duyệt.
.
Và có rất nhiều icon loading dạng .gif được chia sẻ trên mạng các bạn có thể tìm thêm.
1. Các bạn thêm CSS trước </head>
<style>
#status {
width: 200px;
height: 200px;
position: fixed;
left: 50%;
z-index: 100;
top: 50%;
background-image: url(LINK ICON);
background-repeat: no-repeat;
background-position: center;
margin: -100px 0 0 -100px;
z-index: 1001
}
#loader {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: #FFF;
z-index: 1000
}
</style>
2. Thêm jQuery trước </body>
<script>
//<![CDATA[
$(window).bind("load", function() {
jQuery("#status").fadeOut();
jQuery("#loader").fadeOut();
});
//]]>
</script>
3. Thêm HTML dưới <body>
<div id='status'></div>
<div id='loader'></div>
Các bạn copy link icon loading dạng .GIF thay vô CSS bên trên chỗ mình tô đen. Sau đo các bạn lưu lại và kiểm tra trang web trên trình duyệt.
.
Đăng nhận xét