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!

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>~~Chữ gạch ngang~~</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

👉 Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
👉 Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
👉 Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu ✅