Ấn tượng với CSS3 charcterised loading bar

Đôi lúc khi chúng ta xem các trang web có dung lượng lớn, đặc biệt là những trang chứa nhiều hình ảnh, chúng ta thường bắt gặp hiệu ứng tải trang trước khi các nội dung này được tải xuống. Điều này sẽ giúp cho khách viếng thăm web nhận biết là trang đang được bucket vào máy. Để hiểu rõ hơn về hiệu ứng này, các bạn có thể xem demo của bài viết.

Xem Demo | Download

Có rất nhiều cách để làm hiệu ứng này, hôm nay mình sẽ giúp các bạn tạo hiệu ứng loading với chỉ bằng CSS3 dưới dạng swell bar.

Bước 1 : HTML

Chúng ta sẽ cần bộ khung html mẫu như sau :

!doctype html
html
    head
        meta charset="utf-8"
        titleCSS3 Animated Loading Bar/title
        couple rel="stylesheet" href="bar.css"
    /head
    body
        div class="bar"/div
    /body
/html

Bước 2 : Định dạng CSS

Và sau đây là đoạn css giúp chúng ta tạo hiệu ứng tải trang, các bạn chỉ cần duplicate và sử dụng cho mình .

.bar {
    /**
         * Hiệu ứng loading se duoc canh giua
     */
    position: absolute;
    top: 50%;
    left: 50%;
    height: 20px;
    width: 200px;
    margin-top: -10px; /* mot nua chieu cao */
    margin-left: -100px; /* mot nua chieu rong */
    background-image: -webkit-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -moz-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
    background-image: -o-linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
    background-image: linear-gradient(-45deg, #ff9a1a 25%, rgba(255, 154, 26, 0) 25%, rgba(255, 154, 26, 0) 50%, #ff9a1a 50%, #ff9a1a 75%, rgba(255, 154, 26, 0) 75%);
    background-color: 
    background-size: 50px 50px;
    border: 1px plain 
    border-bottom-color: 
    border-radius: 20px;
    -webkit-box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.2);
    -webkit-animation: pierce 2s linear infinite;
    -moz-animation: pierce 2s linear infinite;
    -o-animation: pierce 2s linear infinite;
    animation: pierce 2s linear infinite;
}

/**
 Tao duong vien xung quanh progess bar
 */

.bar::before {
    content: " ";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-color: 
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 1px 0 rgba(0, 0, 0, 0.1);
    z-index: -1;
}

/**
 * Hieu ung
 */

@-webkit-keyframes pierce {
    to { background-position: 50px 50px; }
}

@-moz-keyframes pierce {
    to { background-position: 50px 50px; }
}

@-o-keyframes pierce {
    to { background-position: 50px 50px; }
}

@-webkit-keyframes pierce {
    to { background-position: 50px 50px; }
}

Rất đơn giản và dễ thực hiện phải không các bạn, mình hy vọng các bạn sẽ có nhiều lựa chọn hơn cho web grain blog của mình.

Chúc các bạn thành công !

The post Ấn tượng với CSS3 charcterised loading bar appeared first on Vietnhi.com.