Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản
Chào các bạn, để tạo thêm phần sống động cũng như chuyên nghiệp cho website/blog của mình thì trong hôm nay mình sẽ giới thiệu đến các bạn cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản, ai cũng làm được.
Mọi Admin đều muốn Blog/Website của họ có một cái nhìn đẹp nhất trong mắt quý bạn đọc. Với hiệu ứng tải trang (Loading) cuốn hút sẽ làm tăng sự bắt mắt và giảm bớt sự nhàm chán cho Blog/Website của bạn. Với những Blogspot/Website load châm, hiệu ứng Loading sẽ thể hiện một cách rõ ràng hơn, đồng thời giấu đi sự chậm trễ của Blog/Website đó. Còn đối với những Blog/Website load nhanh, code thể hiện sự chuyên nghiệp trong mắt độc giả!
Các bước thực hiện
Bước 1: Vào quản lý blogspot > Chủ đề > Chỉnh sửa HTML
Bước 2:Chèn đoạn code sau vào bên dưới thẻ <body> (nếu các bạn không tìm ra <body> thì hãy tìm <body nhé)
<style type='text/css'>
.siben {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('Link ảnh loading') center no-repeat #fff;
}
</style>
<div class='siben'></div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.siben').fadeOut(1000);
})
//]]></script>
Thay Link ảnh loading bằng link hình ảnh của bạn, có thể là SVG hoặc GIF.
1000: thời gian kết thúc loading, các bạn có thể tăng giảm để phù hợp với lối hiện thị bạn mong muốn.
Bước 3: Lưu template.
Một số mẫu ảnh loading đẹp
https://ift.tt/fXJCeNg
https://ift.tt/y9ZDXwq
https://ift.tt/Y79R3ep
https://ift.tt/Ux7JK9S
https://ift.tt/YgDnrRf
https://ift.tt/2q9RO8I
https://ift.tt/ElO4mrY
https://ift.tt/TG1FunQ
https://ift.tt/OvA32ry
https://ift.tt/Q5BgzR9
https://ift.tt/31EYm64
https://ift.tt/CK65XHT
https://ift.tt/M5vqkzL
Lời kết
Bên trên là cách tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản. Nếu có gì thắc mắc hay không hiểu bạn có thể để lại comment bên dưới, mình sẽ giải đáp sớm nhất có thể.
Chúc các bạn thành công!
Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản
"Tác giả: - Admin Quốc Bảo Blog
Ghi rõ nguồn www.quocbaoblogit.blogspot.com khi đăng tải lại bài viết này
Copyright © 2017 - Edit bởi
THAM GIA TRANH TOP BÌNH LUẬN NGAY!
Một số lưu ý khi bình luận
Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.