Tạo hiệu ứng loading theo phong cách Facebook bằng CSS3

Chắc hẳn bạn đã quá quen thuộc với hiệu ứng loading trên Facebook mỗi khi chúng ta upload hình ảnh, chia sẽ link, video… cho bạn bè và người thân của mình. Trong bài viết này, chúng ta sẽ tạo ra hiệu ứng loading giống như thế, mà không cần phải dùng bất kì file ảnh nào, tất cả đều được tạo ra bởi CSS3.

Xem Demo | Download

Bước 1 : HTML

Đầu tiên, chúng ta cần có bộ khung html để làm hiệu ứng loading như sau :

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

Bước 2 : Tạo hiệu ứng với CSS3

Bằng cách sử dụng thuộc tính keyframes, các bạn sẽ có thể tạo ra hiệu ứng loading y chang như Facebook. Các bạn chỉ việc copy đoạn css sau và áp dụng vào trang web hay blog của mình là xong.

/* FACEBOOK LOADER */
.loader { awidth:32px; height:32px; }

/* Initial state */
.bar {
    background-color:#99aaca; border:1px solid #96a6c9; float:left;
    margin-right:4px; margin-top:6px; awidth:6px; height:18px;

    /* Set the animation properties */
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: loadingbar;
}

/* Delay both the second and third bar at the start */
.loader .bar:nth-child(2) { animation-delay: 0.1s; }
.loader .bar:nth-child(3) { animation-delay: 0.2s; }

/* The actual animation */
@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% { }
}

Đó là tất cả những gì mà mình muốn chia sẻ cho các bạn , để có thể kiểm nghiệm hiệu ứng tốt nhất, các bạn nên sử dụng trình duyệt Firefox với phiên bản mới nhất, đồng thời nhớ 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 !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster