Contoh Aplikasi

Beranda
CSS

Membuat Modern Grid Loader Animasi untuk Website dengan HTML, CSS, dan JavaScript

Artikel berikut membahas mengenai Membuat Modern Grid Loader Animasi untuk Website dengan HTML, CSS, dan JavaScript


Pendahuluan

Loader animasi adalah elemen penting dalam pengembangan website modern. Selain memberikan visual yang menarik, loader juga memberi feedback kepada pengguna bahwa proses sedang berjalan. Dalam artikel ini, kita akan membuat Modern Grid Loader yang responsif, memiliki animasi halus, dan dilengkapi dengan status loading & success.


Fitur Modern Grid Loader

  1. Desain Responsif – Tampilan menyesuaikan ukuran layar (desktop & mobile).
  2. Animasi Smooth – Efek scaling dan opacity yang natural.
  3. Status Indicator – Menampilkan progress loading dan notifikasi success.
  4. Gradient & Shadow – Memberikan kesan modern dan elegan.
  5. Google Fonts – Menggunakan font Poppins yang stylish.

Kode Lengkap Modern Grid Loader

1. Struktur HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Grid Loader</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="loader-container" id="loader">
        <h1 class="loader-title">Data Processing</h1>
        <div class="modern-grid-loader">
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell"></div>
        </div>
        <p class="status-label loading">Loading your content</p>
        <p class="status-label success">All done! Success!</p>
        <p class="progress-text" id="progress">Initializing...</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Styling CSS (styles.css)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: #343a40;
}

.loader-container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    transition: all 0.3s ease;
}

.loader-title {
    font-size: 1.8rem;
    margin-bottom: 24px;
    font-weight: 600;
    background: linear-gradient(135deg, #fd7e14, #ff9a3e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modern-grid-loader {
    display: grid;
    grid-template-columns: repeat(3, min(20px, 5vw));
    grid-gap: min(10px, 3vw);
    width: fit-content;
    margin: 0 auto 30px;
}

.modern-grid-loader .cell {
    width: min(20px, 5vw);
    height: min(20px, 5vw);
    border-radius: 4px;
    background: linear-gradient(135deg, #fd7e14, #ff9a3e);
    box-shadow: 0 3px 6px rgba(253, 126, 20, 0.2);
    animation: pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.status-label {
    font-size: 1.1rem;
    margin-top: 10px;
    font-weight: 500;
    transition: all 0.4s ease;
}

.status-label.loading {
    color: #fd7e14;
}

.status-label.success {
    color: #28a745;
    opacity: 0;
    transform: translateY(10px);
}

.progress-text {
    font-size: 0.9rem;
    color: #6c757d;
    margin-top: 8px;
    font-weight: 300;
}

/* Animation delays */
.modern-grid-loader .cell:nth-child(1) { animation-delay: 0.1s }
.modern-grid-loader .cell:nth-child(2) { animation-delay: 0.2s }
.modern-grid-loader .cell:nth-child(3) { animation-delay: 0.3s }
.modern-grid-loader .cell:nth-child(4) { animation-delay: 0.2s }
.modern-grid-loader .cell:nth-child(5) { animation-delay: 0.3s }
.modern-grid-loader .cell:nth-child(6) { animation-delay: 0.4s }
.modern-grid-loader .cell:nth-child(7) { animation-delay: 0.3s }
.modern-grid-loader .cell:nth-child(8) { animation-delay: 0.4s }
.modern-grid-loader .cell:nth-child(9) { animation-delay: 0.5s }

@keyframes pulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(0.8);
        opacity: 0.7;
        background: linear-gradient(135deg, #ff9a3e, #fd7e14);
    }
}

/* Success state */
.complete .status-label.loading {
    opacity: 0;
    transform: translateY(-10px);
}

.complete .status-label.success {
    opacity: 1;
    transform: translateY(0);
}

.complete .modern-grid-loader .cell {
    animation: none;
    background: #28a745;
    transform: scale(1);
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .loader-container {
        padding: 30px 20px;
        border-radius: 12px;
    }
    
    .loader-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
    
    .status-label {
        font-size: 1rem;
    }
}

3. JavaScript untuk Animasi (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('loader');
    const progressText = document.getElementById('progress');
    const steps = [
        "Connecting to server...",
        "Loading resources...",
        "Processing data...",
        "Finalizing...",
        "Almost there..."
    ];

    let currentStep = 0;
    
    const progressInterval = setInterval(() => {
        if (currentStep < steps.length) {
            progressText.textContent = steps[currentStep];
            currentStep++;
        } else {
            clearInterval(progressInterval);
            loader.classList.add('complete');
            progressText.textContent = "Ready to go!";
            progressText.style.color = "#28a745";
        }
    }, 1500);
});