LỜI MỞ ĐẦU
Chào mừng tất cả các bạn đã đến bài viết tiếp theo của mình! Cách đây không lâu thì mình có viết bài share CSS Spinner Loading cho blog, nhưng vẫn còn một số lỗi mà mình khắc phục được! Hôm nay, mình quyết định tìm kiếm và share cho các bạn cách tạo hiệu ứng loading đơn giản, hoàn hảo và đẹp nhất =))
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ả! Không liên thiên nữa thì chúng ta bắt đầu nào.
F5 ĐỂ XEM LẠI DEMO
1. TẠO HIỆU ỨNG LOADING CHO BLOGSPOT
Hướng dẫn: Vào Blog => Chủ đề => Chỉnh sửa HTML => Nhấn tổ hợp phím Ctrl + F và tìm đến thẻ <body> => Dán đoạn code dưới đây vào phía dưới thẻ <body> => Lưu lại chủ đề.
Thay Link ảnh loading bằng link hình ảnh của bạn, có thể là SVG hoặc GIF.
<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>
2. MỘT SỐ MẪU ẢNH LOADING
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
Toàn bộ code được sưu tầm tại gemgai.com, vui lòng ghi rõ nguồn gemgai.com & Lê Anh Đức khi copy/reup bài viết này! Nghiêm cấm sử dụng code với mục đích thương mại
LỜI KẾT
Trên đây là toàn bộ Code và một số mẫu Svg loading cho blog/website! Nếu có bất cứ thắc mắc hay khiếu nại về bản quyền hãy comment ngay phía dưới cho mình biết nhé. Chúc các bạn một ngày học tập và làm việc thật hiệu quả !!!
Copyright © Lê Anh Đức
