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

Nếu bạn đang tìm hiệu ứng loading bằng CSS, thì CSS Loaders là bộ sưu tập lớn nhất của chủ đề này.

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

Bạn đơn giản chỉ cần chọn hiệu ứng bạn thích, rồi bấm Copy the CSS để sử dụng, ví dụ.

<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);
    }
}

Ta được.

Bạn có thể áp dụng trang Preload.