Thêm hiệu ứng loading đẹp khi chuyển trang cho blogger

Xin chào các độc giả của Namkna! 

Mình mới gia nhập nhóm cộng tác viên của blog này. Vì là thành viên mới nên chắc còn nhiều thiếu sót về cách thức trình bày cũng như nội dung bài viết, vì vậy mong các bạn góp ý nhiệt tình nha! Và bài viết đầu tiên mình chia sẻ đến các bạn đó là làm cách nào để thêm hiệu ứng Loading khi chuyển trang cho blogger

Có rất nhiều blog đã chia sẻ thủ thuật này nhưng chủ yếu hiệu ứng họ đưa ra là 1 hình ảnh hoặc đoạn text đơn giản "Loading...". Đây cũng chính là sự khác biệt hơn so với những thủ thuật mình nói bên trên, hiệu ứng Loading mà mình giới thiệu ở bài viết này hoàn toàn được tạo bởi CSS như ví dụ bên dưới, chắc hẳn sẽ có bạn tưởng rằng đây là một hình ảnh động

Và để thêm hiệu ứng thú vị này vào blog các bạn vui lòng làm theo các bước hướng dẫn đơn giản bên dưới

CSS

Để hiển thị hình ảnh khi load trang như ở trên bạn thêm code sau vào trước thẻ ]]></b:skin>trong template

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}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 rgb(255, 0, 0)} 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); }}

Script

Chèn đoạn code bên dưới trước thẻ đóng </body>

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</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(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Mình xin được nhắc lại lời bên trên, đây là bài viết đầu tiên của mình tại Namkna blog vì vậy mong được sự đóng góp ý kiến từ các bạn để những bài viết sắp tới sẽ hoàn thiện hơn, đưa đến cộng đồng blogger Việt những thủ thuật tốt nhất. Và nếu có thời gian các bạn hãy ghé thăm blog cá nhân của mình tại địa chỉ TrollVL. Xin cảm ơn và chúc blog các bạn ngày một đẹp và phát triển!