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://dl.dropboxusercontent.com/s/6b7ctab58kg5bfp/025001-Bricks.svg

https://dl.dropboxusercontent.com/s/bl1ms1rpp5hddqe/025001-Coin.svg

https://dl.dropboxusercontent.com/s/4la9ff7obhkzl2y/025001-Crystal.svg

https://dl.dropboxusercontent.com/s/m6pwom5j6i19htm/025001-curve-bars.svg

https://dl.dropboxusercontent.com/s/7luj0iaoi85x41y/025001-Default.svg

https://dl.dropboxusercontent.com/s/lav5hgx7fz92kqp/025001-Earth.svg

https://dl.dropboxusercontent.com/s/sfk3444zgm9733r/025001-Eclipse.svg

https://dl.dropboxusercontent.com/s/ryg70y1g3ymkcyk/025001-Heart.svg

https://dl.dropboxusercontent.com/s/88zu35amrntxvl2/025001-Lava-Lamp.svg

https://dl.dropboxusercontent.com/s/ibk0p0i0nuilsfe/025001-Ripple.svg

https://dl.dropboxusercontent.com/s/d5gkgpoxkuaj5n4/025001-Rolling.svg

https://dl.dropboxusercontent.com/s/f0rwyrg2zatii59/025001-Spinner.svg

https://dl.dropboxusercontent.com/s/v8c71bd4jc3fp0i/025001-Squaricle.svg

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!