CSS Loaders – Bộ sưu tập hiệu ứng loading sử dụng CSS

CSS Loaders là một thư viện mở, tổng hợp hàng trăm hiệu ứng loading được viết hoàn toàn bằng CSS thuần. Không cần JavaScript, không cần thêm thư viện phụ trợ — bạn chỉ việc chọn hiệu ứng bạn thích, sao chép CSS và chèn vào HTML.

Đến CSS Loaders

Sau khi truy cập, bạn chỉ cần nhấn vào nút Copy the CSS bên dưới mỗi hiệu ứng để lấy mã. Dưới đây là một ví dụ đơn giản để bạn hình dung:

HTML

<div class="loader"></div>

CSS

.loader {
    width: 120px;
    height: 22px;
    border-radius: 40px;
    color: #514b82;
    border: 2px solid;
    position: relative;
    overflow: hidden;
}
.loader::before {
    content: "";
    position: absolute;
    margin: 2px;
    width: 14px;
    top: 0;
    bottom: 0;
    left: -20px;
    border-radius: inherit;
    background: currentColor;
    box-shadow: -10px 0 12px 3px currentColor;
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, -30px 50%);
    animation: l14 1s infinite linear;
}
@keyframes l14 {
    100% {
        left: calc(100% + 20px);
    }
}

Và đây là kết quả hiển thị:

Cách ứng dụng hiệu ứng loading vào Preload

Bạn hoàn toàn có thể sử dụng những hiệu ứng này cho trang chờ tải (preload), đặc biệt khi cần giữ người dùng lại trong vài giây đầu khi trang đang load tài nguyên. Tham khảo bài hướng dẫn sau để biết cách tích hợp loader hiệu quả:

• Tạo hiệu ứng Chờ tải trang (Preload)

Tổng kết

CSS Loaders không chỉ giúp tiết kiệm thời gian khi cần chèn hiệu ứng loading nhanh chóng, mà còn mang lại trải nghiệm chuyên nghiệp, mượt mà cho người dùng. Thư viện này rất thích hợp cho cả developer front-end lẫn những bạn làm web với theme có sẵn nhưng muốn bổ sung hiệu ứng tinh tế.

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