Tutorial Membuat Loading Animation dengan CSS

Dalam pengembangan website, animasi loading CSS adalah elemen penting yang sering diabaikan. Padahal, loading animation berfungsi sebagai indikator visual yang memberi tahu pengguna bahwa proses sedang berlangsung — misalnya saat halaman dimuat, data diambil, atau gambar sedang dimuat.

Dengan CSS loading animation, kamu bisa membuat efek yang halus, ringan, dan modern, tanpa perlu JavaScript sama sekali. Mulai dari spinner, loading bar, hingga dot animation, semua bisa dibuat hanya dengan beberapa baris CSS sederhana.

Artikel ini akan membahas cara membuat berbagai jenis animasi loading CSS lengkap dengan kode, penjelasan properti, serta tips agar animasi tampil optimal di semua perangkat.

Baca juga: Belajar CSS Clip Path dan Masking untuk Efek Unik

Mengapa Menggunakan CSS untuk Loading Animation?

Sebelum kita mulai tutorialnya, mari pahami keunggulan CSS loading animation dibandingkan pendekatan lain seperti JavaScript atau GIF:

• Ringan dan cepat dimuat, karena hanya berbasis CSS.
• Bebas dikustomisasi, baik warna, ukuran, maupun durasi.
• Animasi looping CSS yang halus dengan properti animation-iteration-count: infinite;.
• Responsif dan fleksibel, bisa menyesuaikan di berbagai resolusi layar.
• Tanpa dependensi eksternal, jadi cocok untuk web statis maupun dinamis.

Konsep Dasar Animasi di CSS

Sebelum membuat efek loading, kamu perlu memahami konsep dasar CSS Animation. Ada dua komponen utama:

• @keyframes – mendefinisikan perubahan visual dalam timeline animasi.
• animation property – menentukan nama, durasi, timing, dan perilaku animasi.

Contoh sederhana:

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader {
    width: 80px;
    height: 80px;
    border: 8px solid #ddd;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}Code language: CSS (css)

Penjelasan:

• transform: rotate() → membuat elemen berputar.
• animation: rotate 1s linear infinite → menjalankan animasi tanpa henti.

Membuat CSS Loading Spinner

Salah satu bentuk loading animation yang paling umum adalah spinner — animasi melingkar yang terus berputar.

Kode HTML:

<div class="spinner"></div>Code language: HTML, XML (xml)

Kode CSS:

.spinner {
    width: 80px;
    height: 80px;
    border: 10px solid #f3f3f3;
    border-top: 10px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}Code language: CSS (css)

Penjelasan:

• border-top → diberi warna berbeda untuk menciptakan efek “berputar”.
• animation: spin 1s linear infinite → membuat animasi terus berulang tanpa henti.

Tips: kamu bisa menambahkan animation-duration lebih besar (misalnya 2s) untuk efek rotasi lebih lambat.

Berikut ini adalah hasil visual kode diatas.

Loading Dots Animation

Efek loading dots sering digunakan di chat app atau form submission.

HTML:

<div class="dots">
    <span></span>
    <span></span>
    <span></span>
</div>Code language: HTML, XML (xml)

CSS:

.dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dots span {
    width: 15px;
    height: 15px;
    background-color: #3498db;
    border-radius: 50%;
    animation: bounce 1.2s infinite ease-in-out;
}

.dots span:nth-child(2) {
    animation-delay: 0.2s;
}
.dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}Code language: CSS (css)

Penjelasan:

• Menggunakan transform: scale() untuk membuat titik memantul.
• animation-delay menciptakan efek bergantian antar titik.
• Hasilnya: tiga titik muncul dan menghilang secara berurutan.

Berikut ini adalah hasil visual dari kode diatas.

Loading Bar Animation

Jenis loading bar cocok digunakan sebagai indikator progres halaman.

HTML:

<div class="loading-bar">
    <div class="progress"></div>
</div>Code language: HTML, XML (xml)

CSS:

.loading-bar {
    width: 100%;
    height: 6px;
    background-color: #eee;
    overflow: hidden;
    border-radius: 3px;
}

.progress {
    width: 0;
    height: 100%;
    background-color: #3498db;
    animation: loading 3s ease-in-out infinite;
}

@keyframes loading {
    0% {
        width: 0;
    }
    50% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}Code language: CSS (css)

Penjelasan:

• width berubah dari 0 → 100% → 0 untuk mensimulasikan pergerakan.
• animation-timing-function: ease-in-out memberikan efek halus.

Berikut ini adalah hasil visual loading bar dengan CSS.

Efek Loading Berputar Ganda (Dual Ring Spinner)

Untuk tampilan modern seperti loader aplikasi web besar.

HTML:

<div class="dual-ring"></div>Code language: HTML, XML (xml)

CSS:

.dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}
.dual-ring::after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #3498db;
    border-color: #3498db transparent #3498db transparent;
    animation: dual-spin 1.2s linear infinite;
}

@keyframes dual-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}Code language: CSS (css)

Efek ini menggunakan dua warna pada sisi berseberangan untuk kesan berputar elegan.

Membuat Loading Text Animation

Kamu juga bisa membuat teks loading interaktif menggunakan CSS.

HTML:

<h2 class="loading-text">Loading...</h2>Code language: HTML, XML (xml)

CSS:

.loading-text {
    font-size: 24px;
    font-weight: bold;
    color: #3498db;
    letter-spacing: 2px;
    animation: fade 1.5s infinite;
}

@keyframes fade {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 1;
    }
}Code language: CSS (css)

Efek ini memberi kesan teks “berkedip” halus selama loading berlangsung.

Kombinasi Loading Animation: Spinner + Text

Kamu bisa menggabungkan spinner dan teks loading menjadi satu elemen estetis.

<div class="loader-container">
    <div class="spinner"></div>
    <p>Loading data...</p>
</div>Code language: HTML, XML (xml)

.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
}

.loader-container .spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #ddd;
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-container p {
    margin-top: 12px;
    color: #555;
    font-size: 16px;
    animation: fade 1.5s infinite;
}Code language: CSS (css)

Hasilnya: kombinasi antara animasi rotasi dan animasi opacity yang sinkron.

Menyesuaikan Kecepatan dan Timing Animasi

Properti penting yang bisa kamu gunakan untuk menyesuaikan perilaku animasi:

Contoh penerapan:

.loader {
    animation: spin 2s ease-in-out infinite alternate;
}Code language: CSS (css)

Efeknya: putaran maju mundur dengan gerakan halus.

Tips Membuat CSS Loading Animation yang Efektif

1. Gunakan warna kontras agar loader mudah terlihat.
2. Sesuaikan ukuran loader dengan konteks — kecil untuk tombol, besar untuk halaman.
3. Gunakan animasi yang halus, hindari gerakan terlalu cepat.
4. Pastikan responsif di semua perangkat (gunakan em atau % daripada px).
5. Optimalkan performa dengan will-change: transform; untuk animasi berat.
6. Gunakan animasi CSS infinite hanya jika benar-benar diperlukan.

Kesimpulan

Dengan hanya menggunakan CSS, kamu dapat membuat berbagai loading animation kreatif seperti spinner, dot bounce, bar, maupun efek fade-in text. Selain menarik secara visual, animasi ini juga membantu meningkatkan pengalaman pengguna (UX) saat menunggu proses di website.

Mulailah bereksperimen dengan kombinasi @keyframes, transform, dan animation untuk menciptakan CSS loading animation yang unik dan profesional — tanpa satu baris pun JavaScript!