Share Tạo biểu tượng loading đẹp mắt bằng CSS

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Hiện nay có nhiều thư viện hỗ trợ việc tạo biểu tượng với hiệu ứng loading, tuy nhiên các thư viện này thường nặng nề hơn so với những gì mà nó làm được. Vì vậy, nếu các bạn có kinh nghiệm tốt về CSS thì các bạn hoàn toàn có thể tự tạo ra các biểu tượng loading chỉ bằng vài dòng mã lệnh CSS đơn giản.

Các biểu tượng với hiệu ứng loading thường được sử dụng khi trang hoặc thành phần nào đó trên trang đang đợi hiển thị nội dung, biểu tượng này xuất hiện sẽ báo cho người dùng biết họ cần chờ đợi nội dung tải về.

Bài viết này tôi sẽ hướng dẫn các bạn tạo ra 2 biểu tượng loading đẹp mắt chỉ với vài dòng mã lệnh CSS đơn giản. Trước tiên, các bạn tạo thành phần HTML như sau:
HTML:
<button type="button"></button>
Tiếp theo là viết vài dòng mã lệnh CSS để biến button trên thành một biểu tượng loading:
CSS:
button {
    width: 40px;
    height: 40px;
    background: #151825;
    border: 1px solid #1d9af2;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spinner 600ms linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
Với những dòng CSS như trên là các bạn đã tạo thành công một biểu tượng loading đẹp mắt rồi. Tiếp theo tôi sẽ tạo tiếp một biểu tượng loading tương tự như biểu tượng trên với CSS như sau:
CSS:
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-radius: 50%;
    animation: spinner 600ms linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}
Các bạn có thể sử dụng các dòng mã lệnh CSS trên với một chút tuỳ chỉnh để tạo ra các biểu tượng loading cho riêng mình.
 
Back
Top