Tạo hiệu ứng loading khi chuyển trang cực kì đẹp và chuyên nghiệp

Để góp phần làm blog của bạn thêm chuyên nghiệp và sinh động, hôm nay mình sẽ giới thiệu đến các bạn một hiệu ứng loading cực kì đẹp và chuyên nghiệp khi chuyển trang. Thủ thuật này được chia sẻ khá nhiều rồi nhưng mình đã tùy biến lại một chút để cho hiệu ứng đẹp và nhẹ hơn.
Bạn muốn xem demo thì hãy bấm nút Ctrl rồi bấm vào bất kì link nào trên blog để xem hiệu ứng.
Cùng thực hiện thủ thuật nhé.

Bước 1: Đăng nhập Blogger Mẫu Chỉnh sửa HTML.
Bước 2: Chép và dán đoạn CSS sau vào trên thẻ ]]></b:skin> trong template.

#loadhalaman{cursor:wait;position:fixed;opacity:1;top:0;left:0;background-color:rgba(0,0,0,.99);z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none}.loadball{background-color:transparent;border:3px solid #55579e;border-right:3px solid transparent;border-left:3px solid transparent;border-radius:50px;box-shadow:0 0 55px #55579e;width:60px;height:60px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1.5s infinite linear;display:none}.loadball-2{background-color:transparent;border:4px solid #55579e;border-left:4px solid transparent;border-right:4px solid transparent;border-radius:500px;box-shadow:0 0 50px #55579e;width:40px;height:40px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse .75s infinite linear}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #55579e}50%{-moz-transform:rotate(145deg);opacity:1}100%{-moz-transform:rotate(-320deg);opacity:0}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #55579e}50%{-webkit-transform:rotate(145deg);opacity:1}100%{-webkit-transform:rotate(-320deg);opacity:0}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}

Bước 3: Tiếp tục chèn đoạn code sau vào phía sau thẻ <body> trong template.

<div id='loadhalaman'><div class='loadball'/><div class='loadball-2'/></div>
<script type='text/javascript'>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
$internalLinks.click(function() {
$('#loadhalaman').fadeIn(300).delay(60000).fadeOut(300);
});
$('#loadhalaman').click(function() {
$(this).hide();});});
</script>

Bước 4: Cuối cùng lưu template lại và xem kết quả!

Bình luận Blogger

MỘT SỐ LƯU Ý KHI BÌNH LUẬN:
● Comment có văn hóa: Không chửi tục, nói bậy, thông qua khung Comment.
● Với tên "ẩn danh" thì bạn tích vào ô: "chứng minh bạn không phải là rô-bốt".
● Để bình luận một đoạn code, bạn click vào đây để mã hóa code trước nhé !
● Để đăng ảnh làm hình minh họa, bạn click vào đây để Upload ảnh lên sever nhé !