04/10/2018, 20:11

Cực ấn tượng với hiệu ứng loading màu sắc bằng CSS3

Việc để người dùng chờ đợi load trang là điều mà không một ai trong chúng ta mong muốn , và để có thể giảm bớt sự phiền toái này, các bạn có thể cho vào một hiệu ứng tải trang đầy sáng tạo và không giống ai. Trong bài viết này, mình xin chia sẻ cho các bạn một hiệu ứng loading đầy màu sắc và không ...

Việc để người dùng chờ đợi load trang là điều mà không một ai trong chúng ta mong muốn , và để có thể giảm bớt sự phiền toái này, các bạn có thể cho vào một hiệu ứng tải trang đầy sáng tạo và không giống ai. Trong bài viết này, mình xin chia sẻ cho các bạn một hiệu ứng loading đầy màu sắc và không kém phần sinh động, đảm bảo các bạn sẽ ấn tượng ngay từ cái nhìn đầu tiên.

Cực ấn tượng với hiệu ứng loading màu sắc bằng CSS3

Xem Demo | Download

HTML

Để tạo hiệu ứng loading này, các bạn copy theo cấu trúc html như sau :

<div class="container">
    <div class="row">
        <div id="loader">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </div>
</div>

CSS

Vì chúng ta không sử dụng bất kì hình ảnh hay đoạn script nào để tạo hiệu ứng, các bạn hãy để ý kỹ từng đoan css3 và các bạn sẽ thấy tác giả của hiệu ứng này cực kì thông minh.

#loader {
    bottom: 0;
    height: 175px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    awidth: 175px;
}
#loader {
    bottom: 0;
    height: 175px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    awidth: 175px;
}
#loader .dot {
    bottom: 0;
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    awidth: 87.5px;
}
#loader .dot::before {
    border-radius: 100%;
    content: "";
    height: 87.5px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform: scale(0);
    awidth: 87.5px;
}
#loader .dot:nth-child(7n+1) {
    transform: rotate(45deg);
}
#loader .dot:nth-child(7n+1)::before {
    animation: 0.8s linear 0.1s normal none infinite running load;
    background: #00ff80 none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+2) {
    transform: rotate(90deg);
}
#loader .dot:nth-child(7n+2)::before {
    animation: 0.8s linear 0.2s normal none infinite running load;
    background: #00ffea none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+3) {
    transform: rotate(135deg);
}
#loader .dot:nth-child(7n+3)::before {
    animation: 0.8s linear 0.3s normal none infinite running load;
    background: #00aaff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+4) {
    transform: rotate(180deg);
}
#loader .dot:nth-child(7n+4)::before {
    animation: 0.8s linear 0.4s normal none infinite running load;
    background: #0040ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+5) {
    transform: rotate(225deg);
}
#loader .dot:nth-child(7n+5)::before {
    animation: 0.8s linear 0.5s normal none infinite running load;
    background: #2a00ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+6) {
    transform: rotate(270deg);
}
#loader .dot:nth-child(7n+6)::before {
    animation: 0.8s linear 0.6s normal none infinite running load;
    background: #9500ff none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+7) {
    transform: rotate(315deg);
}
#loader .dot:nth-child(7n+7)::before {
    animation: 0.8s linear 0.7s normal none infinite running load;
    background: magenta none repeat scroll 0 0;
}
#loader .dot:nth-child(7n+8) {
    transform: rotate(360deg);
}
#loader .dot:nth-child(7n+8)::before {
    animation: 0.8s linear 0.8s normal none infinite running load;
    background: #ff0095 none repeat scroll 0 0;
}

Mình hy vọng là các bạn có thể học hỏi được nhiều điều từ bài viết này, đừng ngần ngại để lại lời nhắn dưới dạng comments và nhớ chia sẻ bài viết cho bạn bè của mình.

Tags: css3 loading

Chuyên Mục: Css

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

Bài liên quan

Cực ấn tượng với hiệu ứng loading màu sắc bằng CSS3

Việc để người dùng chờ đợi load trang là điều mà không một ai trong chúng ta mong muốn , và để có thể giảm bớt sự phiền toái này, các bạn có thể cho vào một hiệu ứng tải trang đầy sáng tạo và không giống ai. Trong bài viết này, mình xin chia sẻ cho các bạn một hiệu ứng loading đầy màu sắc và không ...

Hoàng Hải Đăng viết 3 tuần trước

Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3

Không có cách học nào tốt hơn là tự bắt tay vào làm và từ đó chúng ta sẽ học và nhớ rất kỹ những gì mà chúng ta đã làm. Để thêm sự sáng tạo cho các bạn khi thiết kế web cũng như trang trí cho blog của mình. Hôm nay , mình sẽ chia sẻ cho các bạn một mẫu thiết kế đồng hồ đếm ngược , rất thích hợp cho ...

Trần Trung Dũng viết 3 tuần trước

Tạo button với hiệu ứng hover đơn giản bằng CSS3

Tranh thủ một chút ít thời gian, mình sẽ chia sẻ cho các bạn một mẫu button rất đáng để các bạn sử dụng trên các trang blog hay web của mình. Nếu không thích thì các bạn cũng có thể học thêm được nhiều về CSS3 với những thuộc tính mà nó tạo hiệu ứng cho button này. Xem Demo | Download ...

Hoàng Hải Đăng viết 3 tuần trước

Thiết kế hiệu ứng đẹp cho checkbox bằng CSS3 và iconfonts

Việc thiết kế web chẳng hề đơn giản chút nào, nhất là với khi chúng ta đã thiết kế rất nhiều kiểu khác nhau, và dần dần, chúng càng trở nên đơn điệu và không có gì là mới mẻ.Nếu các bạn đã cảm thấy nhàm chán với những hình vuông đơn giản mặc đinh và không có gì đẹp mắt của các ô checkbox. Thì qua ...

Trịnh Tiến Mạnh viết 3 tuần trước

Ấn tượng với hiệu ứng hover ảnh bằng CSS3 hoặc jQuery

Thông thường, để xây dựng ứng dụng ảnh gallery trên website , chúng ta thường áp dụng cách cơ bản là tạo những ảnh thumnail nhỏ. Và khi click vào chúng, thì sẽ xuất hiện những ảnh lớn hơn dưới dạng pop up (sử dụng những scirpt như Fancybox). Sẽ là một ý tưởng hay hơn nếu chúng ta áp dụng thêm hiệu ...

Trịnh Tiến Mạnh viết 3 tuần trước
0