Share Hướng dẫn thêm hai biểu tượng loading đẹp mắt bằng CSS

[filiallion]

Language

Tiếng Việt

Tôi đã hướng dẫn các bạn tạo biểu tượng loading bằng CSS ở bài viết "Tạo biểu tượng loading đẹp mắt bằng CSS". Bài viết này tôi tiếp tục hướng dẫn các bạn tạo thêm hai biểu tượng loading khác cũng chỉ bằng vài dòng mã lệnh CSS đơn giản.

Tất cả các biểu tượng loading tôi hướng dẫn ở cả hai bài viết các bạn đều có thể tuỳ chỉnh CSS để tạo ra các biểu tượng loading mang phong cách riêng của các bạn. Qua hai bài hướng dẫn này, các bạn có thể không cần quan tâm tới các thư viện hỗ trợ tạo loading khác, chỉ cần các bạn tận dụng các hướng dẫn của tôi là có thể tạo ra bất kỳ biểu tượng loading nào mà các bạn muốn.

Các bạn tạo một nút bấm như sau:

<button type="button"></button>

Và viết vài dòng mã lệnh CSS như sau:

button {
    width: 40px;
    height: 40px;
    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 800ms ease infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

Tiếp theo là một biểu tượng loading khác:

button {
    width: 40px;
    height: 40px;
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #1d9af2;
    border-radius: 50%;
    animation: spinner 800ms linear infinite;
}

@keyframes spinner {
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

Nếu có khó khăn gì trong quá trình sử dụng các ví dụ của tôi, các bạn có thể gửi phản hồi tôi sẽ giải đáp.