Share Sử dụng CSS3 để thiết kế hiệu ứng loading đẹp mắt

filiallion

Administrator
Staff member
Administrator
Messages
498
Points
10
Language
Tiếng Việt
Hiệu ứng loading hiện nay rất hay được sử dụng trên các website, mục đích chính của nó là thông báo cho người dùng biết tiến trình đang được xử lý và khuyên người dùng chờ đợi. Ngoài ra, hiệu ứng loading còn giúp cho website trở nên đẹp hơn, chuyên nghiệp hơn, giúp website tương tác tốt với người dùng. Việc thiết kế hiệu ứng loading không phức tạp, các bạn có thể sử dụng CSS3 hoặc JavaScript để thiết kế. Bài viết này tôi sẽ hướng dẫn các bạn sử dụng CSS3 để thiết kế một vài hiệu ứng loading đẹp mắt.

Hiệu ứng đầu tiên tôi giới thiệu với các bạn:
CSS:
.loading-1 {
    width: 50px;
    height: 50px;
    background: #151825;
    border: 1px solid #0062af;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spinner-1 600ms linear infinite;
}

@keyframes spinner-1 {
    to {
        transform: rotate(360deg);
    }
}
Hiệu ứng thứ hai:
CSS:
.loading-2 {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(0, 0, 0, 0.4);
    border-top-color: #fff;
    border-bottom-color: #fff;
    border-radius: 50%;
    animation: spinner-2 800ms ease infinite;
}

@keyframes spinner-2 {
    to {
        transform: rotate(360deg);
    }
}
Hiệu ứng thứ ba:
CSS:
.loading-3 {
    width: 50px;
    height: 50px;
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #0062af;
    border-radius: 50%;
    transform: scale(0);
    animation: spinner-3 800ms linear infinite;
}

@keyframes spinner-3 {
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}
Trên đây chỉ là một vài ví dụ theo thiết kế riêng của tôi, các bạn có thể tuỳ chỉnh các mẫu hiệu ứng loading này để tạo ra hiệu ứng loading riêng của các bạn.
 
Top