Code loading blogspot dịp tết trung thu

Chào mọi người,

Mình chia sẽ đến mọi người một tiện ích loading trung thu khá thú vị cho anh em làm đẹp và nội bật sự kiện sắp diễn ra.

Nội Dung

Như các bạn đã thấy ở tiêu đề và nội dung mình nhắc tới ở phần mở đầu. Thì nay mình sẽ share code loading trang trí blog dịp tết trung siêu dẹp cho anh em. Code này mình có tham khảo nhiều tài liệu và viết vại để chia sẻ.

Cách sử dụng: Để dùng được thì anh em chỉ cần copy mã sau và dán vào phần chỗ anh em muốn để nhưng lưu ý là phải thêm vào trước thẻ đóng </body> .

 <style>
/* Tổng thể hiệu ứng loading */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0c1445; /* Màu nền đêm */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease, visibility 0.8s;
    visibility: visible;
    opacity: 1;
}

/* Container chính cho loader */
.mooncakes-loader {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Mặt trăng */
.moon {
    width: 120px;
    height: 120px;
    background-color: #f8f8a2;
    border-radius: 50%;
    box-shadow: 0 0 40px #f8f8a2, 0 0 60px #f8f8a2;
    position: absolute;
    top: -60px; /* Điều chỉnh vị trí của mặt trăng */
    z-index: 1;
}

/* Đèn lồng */
.lantern {
    width: 100px;
    height: 100px;
    position: relative;
    z-index: 2;
    animation: swing 2.5s ease-in-out infinite;
    transform-origin: top center;
}

/* Ngôi sao của đèn lồng */
.lantern .star {
    width: 100%;
    height: 100%;
    background-color: #ff5722;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: spin 3s linear infinite;
}

/* Dòng chữ "Đang tải..." */
.loading-text {
    margin-top: 130px; /* Khoảng cách từ đèn lồng xuống chữ */
    color: #f8f8a2;
    font-size: 1.2em;
    font-family: Arial, sans-serif;
    letter-spacing: 1px;
    animation: blink 1.5s linear infinite;
}

/* Keyframes cho chuyển động */
@keyframes swing {
    0%, 100% { transform: rotate(10deg); }
    50% { transform: rotate(-10deg); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
</style>

<div class='loading-overlay'>
    <div class='mooncakes-loader'>
        <div class='moon'></div>
        <div class='lantern'>
            <div class='star'></div>
        </div>
        <p class='loading-text'>Đang tải...</p>
    </div>
</div>

<script>
// Sử dụng sự kiện 'load' của window để đảm bảo tất cả tài nguyên (ảnh, css) đã được tải xong
window.addEventListener('load', function() {
    const loadingOverlay = document.querySelector('.loading-overlay');
    if (loadingOverlay) {
        // Làm cho màn hình loading mờ dần đi
        loadingOverlay.style.opacity = '0';
        loadingOverlay.style.visibility = 'hidden';
    }
});
</script>

Như vậy đã hoàn thành, mọi người lưu lại và xem kết quả nhé.

 

DEMO NGAY TẠI BÀI VIẾT NÀY.

Đang tải...

Chúc mọi người thành công.

Theo Trick Pro