quang cao hosting

Hướng dẫn cách làm CSS3 Ấn tượng với animated loading bar

Xem: 920    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 5 đánh giá ) File đã được kiểm thử

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

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.

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

Hướng dẫn cách làm CSS3 Ấn tượng với animated loading bar

Hướng dẫn cách làm CSS3 Ấn tượng với  animated loading bar Đăng ngày 14-08-2014  Đô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. 1.8/10 920

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 
File gợi ý cho bạn
File tải nhiều nhất
Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2021. All rights reserved. Bản quyền thuộc VinaGon
Email: info@vinagon.com
Hotline: 086.924.3838