Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản

Anh Trai Nắng
personAnh Trai Nắng
22 tháng 11
13
Hiệu ứng loading khi tải trang là một phần quan trọng của trải nghiệm người dùng trên web blog.

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.

Tạo hiệu ứng loading chuyên nghiệp khi tải trang đơn giản

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!

Tags
Anh Trai Nắng

Anh Trai Nắng

Không muốn hoặc không thích. Không tồn tại hoặc không thể! facebook twitter youtube instagram external-link

    Hiện thêm

    Đăng nhận xét

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

    13 Nhận xét

    Đăng nhận xét

    #buttons=(Thanks!) #days=(7)

    À mình có làm website tăng tương tác MXH giá rẻ. Mọi người nếu cần thì ghé sử dụng các dịch vụ thử nha. Ghé xem dịch vụ
    Ok, Go it!
    Chia sẻ với ứng dụng khác
    Copy Post Link

    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