Tạo hiệu ứng Loading giống với Facebook bằng CSS3

facebook-loadingGần như tất cả mọi người hiện nay đang dùng Facebook và chắc chắn bạn cũng đã từng thấy hiệu ứng loading của facebook xuất hiện khi bạn đưa một đường dẫn bất kỳ vào khung soạn thảo. Trong bài viết này mình sẽ chia sẽ cho các bạn tạo ra hiệu ứng loading giống với facebook chỉ đơn giản bằng CSS3.

Để tạo được hiệu ứng loading giống như facebook mà không cần dùng bất kỳ hình ảnh động nào, đầu tiên chúng ta xây dựng trước với HTML đơn giản:

<div class="loader">
 <div class="bar"></div>
 <div class="bar"></div>
 <div class="bar"></div>
</div>

tao-hieu-ung-loading-giong-voi-facebook-bang-css3

Sau khi đã xây dựng cấu trúc loading với HTML, chúng ta sẽ sử dụng thuộc tính keyframes trong CSS3 để tạo ra hiệu ứng nêu trên, bắt đầu định dạng chúng với CSS3 như sau:

# Bắt đầu với CSS cơ bản:

/* FACEBOOK LOADER */
.loader { width:32px; height:32px; }
 
/* Initial state */
.bar {
 background-color:#99aaca; border:1px solid #96a6c9; float:left;
 margin-right:4px; margin-top:6px; width:6px; height:18px;
 
 /* Set the animation properties */
 animation-duration: 1s;
 animation-iteration-count: infinite;
 animation-name: loadingbar;
}

# Tạo ra hiệu ứng delay giữa keyframes 2 và 3

.loader .bar:nth-child(2) { animation-delay: 0.1s; }
.loader .bar:nth-child(3) { animation-delay: 0.2s; }

# The actual animation – Sử dụng thuộc tính keyframes của CSS3

@keyframes loadingbar {
 0% { }
 10% { margin-top:5px; height:22px; border-color:#d1d8e6; background-color:#bac5db; }
 20% { margin-top:0px; height:32px; border-color:#d1d7e2; background-color:#c6ccda; }
 30% { margin-top:1px; height:30px; border-color:#d1d8e6; background-color:#bac5db; }
 40% { margin-top:3px; height:26px; }
 50% { margin-top:5px; height:22px; }
 60% { margin-top:6px; height:18px; }
 70% { }
 /* Missing frames will cause the extra delay */
 100% { }
}

Đơn giản vậy thôi, bạn có thể xem demo để hiểu rõ hơn, thêm các tiền tố như -webkit-, -moz- … đằng trước thuộc tính keyframes cho những trình duyệt thích hợp. Chúc các bạn thành công!

Đánh giá

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.