Tổng hợp 3 hiệu ứng loading CSS đẹp cho blog

Posted by on
Trong khi chờ đợi tải xong một trang nào đó thì thật chán, nhất là khi mạng yếu. Hiểu được cảm giác này nên hôm nay mình giới thiệu với các bạn một số hiệu ứng loading đẹp mắt để người đọc đỡ thấy chán trong thời gian chờ đợi và blog của bạn thêm sinh động

#Từ CSS

Đây là một hiệu ứng loading khá lạ mắt bởi nó không phải là ảnh động mà chính là CSS, sau đây là cách làm:
  • Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML > Tìm thẻ ]]></b:skin> > Dán code dưới vào trên thẻ vừa tìm.
#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); }}
  • Tìm thẻ </body> > Dán code dưới vào trên thẻ vừa tìm > Save
<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>

#Animation từ CSS3 #1

Đây cũng là một hiệu ứng loading từ CSS, chúng ta thường thấy nó ở trên Windows Phone.
DEMO

  • Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML > Tìm thẻ ]]></b:skin> > Dán code dưới vào trên thẻ vừa tìm được
span {
    display: inline-block;
    background: #fff;
    width: 4px;
    height: 4px;
 margin: 12px 2px;
    -webkit-border-radius: 100%;
 -moz-border-radius: 100%;
 border-radius: 100%;
    
    -webkit-animation: loader 4s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -webkit-animation-fill-mode: both;
    -moz-animation: loader 4s infinite;
    -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -moz-animation-fill-mode: both;
    -ms-animation: loader 4s infinite;
    -ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    -ms-animation-fill-mode: both;
    animation: loader 4s infinite;
    animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
    animation-fill-mode: both;}
.step1 {
 -webkit-animation-delay: 1s; 
 -moz-animation-delay: 1s; 
 -ms-animation-delay: 1s; 
 animation-delay: 1s;}
 
.step2 { 
 -webkit-animation-delay: 0.8s; 
 -moz-animation-delay: 0.8s; 
 -ms-animation-delay: 0.8s; 
 animation-delay: 0.8s;}
 
.step3 { 
 -webkit-animation-delay: 0.6s; 
 -moz-animation-delay: 0.6s; 
 -ms-animation-delay: 0.6s; 
 animation-delay: 0.6s;}
 
.step4 { 
 -webkit-animation-delay: 0.4s; 
 -moz-animation-delay: 0.4s; 
 -ms-animation-delay: 0.4s; 
 animation-delay: 0.4s;}
 
.step5 { 
 -webkit-animation-delay: 0.2s; 
 -moz-animation-delay: 0.2s; 
 -ms-animation-delay: 0.2s; 
 animation-delay: 0.2s;}
 
.step6 { 
 -webkit-animation-delay: 0s; 
 -moz-animation-delay: 0s; 
 -ms-animation-delay: 0s; 
 animation-delay: 0s;}
@-webkit-keyframes loader {
    0% { -webkit-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -webkit-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes loader {
    0% { -moz-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -moz-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes loader {
    0% { -ms-transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { -ms-transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
@keyframes loader {
    0% { transform: translateX(-30px); opacity: 0; }
    25% { opacity: 1; }
    50% { transform: translateX(30px); opacity: 0; }
    100% { opacity: 0; }
}
  • Tìm thẻ </body> > Chèn code dưới vào trên thẻ vừa tìm được
<span class="step1"></span>
<span class="step2"></span>
<span class="step3"></span>
<span class="step4"></span>
<span class="step5"></span>
<span class="step6"></span>

#Animation từ CSS3 #2

  • Đăng nhập Blogger > Mẫu > Chỉnh sửa HTML > Tìm thẻ ]]></b:skin> > Dán code dưới vào trên thẻ vừa tìm được
.spinner { 
  margin: 100px auto; 
  width: 50px; 
  height: 30px; 
  text-align: center; 
  font-size: 10px; 
} 

.spinner > div { 
  background()-color: #333; 
  height: 100%; 
  width: 6px; 
  display: inline-block; 

  -webkit-animation: stretchdelay 1.2s infinite ease-in-out; 
  animation: stretchdelay 1.2s infinite ease-in-out; 
} 

.spinner .rect2 { 
  -webkit-animation-delay: -1.1s; 
  animation-delay: -1.1s; 
} 

.spinner .rect3 { 
  -webkit-animation-delay: -1.0s; 
  animation-delay: -1.0s; 
} 

.spinner .rect4 { 
  -webkit-animation-delay: -0.9s; 
  animation-delay: -0.9s; 
} 

.spinner .rect5 { 
  -webkit-animation-delay: -0.8s; 
  animation-delay: -0.8s; 
} 

@-webkit-keyframes stretchdelay { 
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) } 
} 

@keyframes stretchdelay { 
  0%, 40%, 100% { 
    transform: scaleY(0.4); 
    -webkit-transform: scaleY(0.4); 
  }  20% { 
    transform: scaleY(1.0); 
    -webkit-transform: scaleY(1.0); 
  } 
}
  • Tìm thẻ </body> > Chèn code dưới vào trên thẻ vừa tìm được
<div class="spinner" id="khanhblog_loading"> 
  <div class="rect1"></div> 
  <div class="rect2"></div> 
  <div class="rect3"></div> 
  <div class="rect4"></div> 
  <div class="rect5"></div> 
</div>
 <script type='text/javascript'>
$(function(){ 
      $('#khanhblog_loading').hide(); 
}); </scrip>
Hi! My name is Quoc Khanh. I am from Vietnam.

Comments

Post a Comment



» Vui lòng không spam vì nó sẽ bị xóa ngay sau đó.
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Nếu thủ thuật Blog không áp dụng được thì hãy để lại URL blog để mình tiện kiểm tra.