Sự kiện

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

Danh mục: CSS
 

Đô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 load 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.

animation, css tips, css3, CSS3 Animation, hiệu ứng tải trang, loading bar ,progress bar ,thu thua yahoo

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 progress 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">

        <title>CSS3 Animated Loading Bar</title>

        <link 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 copy 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: #d3d3d3;

    background-size: 50px 50px;

    border: 1px solid #ff9a1a;

    border-bottom-color: #e68100;

    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: move 2s linear infinite;

    -moz-animation: move 2s linear infinite;

    -o-animation: move 2s linear infinite;

    animation: move 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: #000;

    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 move {

    to { background-position: 50px 50px; }

}



@-moz-keyframes move {

    to { background-position: 50px 50px; }

}



@-o-keyframes move {

    to { background-position: 50px 50px; }

}



@-webkit-keyframes move {

    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 hay blog của mình.

 



BÀI VIẾT KHÁC
CODE GỢI Ý
BÌNH LUẬN

BẢN QUYỀN ®
MANGUON.COM đã đăng kí quyền tác giả: AR1682/GP-STTTP
Mọi chia sẻ nội dung thuộc tác quyền của MANGUON.COM phải ghi rõ "Nguồn MANGUON.COM"