cssanimasiloadingstudi-kasusMahir6 mnt baca

Studi Kasus: Animasi Loading

Tiga pola loading profesional: spinner, skeleton, dan dots dengan delay stagger.

Kenapa loading animation penting?

Saat data dimuat, layar kosong membuat pengguna mengira aplikasi rusak. Animasi loading memberi sinyal "sabar, sedang bekerja". Tiga pola mendominasi web modern: spinner (tunggu singkat), dots (proses), dan skeleton (konten terstruktur).

1. Spinner klasik

css

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

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid #e2e8f0;
  border-top-color: #38bdf8;
  border-radius: 50%;
  animation: putar 0.8s linear infinite;
}

Sederhana dan universal. Cocok untuk tombol yang sedang memproses.

2. Skeleton screen

Alih-alih spinner generik, tampilkan kerangka bentuk konten yang akan muncul. Pengguna mempersepsikan loading lebih cepat.

css

@keyframes kilau {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

.skeleton {
  height: 20px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 400px 100%;
  animation: kilau 1.2s linear infinite;
}

Triknya: gradien dengan highlight yang digeser via background-position, menciptakan efek kilau berjalan. Dipakai Facebook, YouTube, dan LinkedIn.

html

<div class="kartu-skeleton">
  <div class="skeleton" style="width: 60px; height: 60px; border-radius: 50%;"></div>
  <div>
    <div class="skeleton" style="width: 180px;"></div>
    <div class="skeleton" style="width: 120px; margin-top: 8px;"></div>
  </div>
</div>

3. Dots dengan stagger

css

@keyframes lompat {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(-10px); opacity: 1; }
}

.dots span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background: #38bdf8;
  border-radius: 50%;
  animation: lompat 1s ease-in-out infinite;
}

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

Tiga titik melompat bergantian: pola chat "sedang mengetik" dan proses umum.

Memilih pola yang tepat

Spinner: aksi singkat tak terstruktur (submit form, tombol).
Skeleton: konten terstruktur akan muncul (daftar, kartu, artikel).
Dots: proses percakapan atau status (typing indicator).

Catatan teknis: animasi loading harus berhenti saat konten tiba (via JavaScript mengganti class). Jangan lupa prefers-reduced-motion: untuk skeleton, ganti animasi kilau dengan warna statis.

Tips profesional

Skeleton lebih baik dari spinner untuk konten terstruktur: pengguna mempersepsikan loading lebih cepat.
Bila data > 3 detik, tampilkan pesan progres, bukan spinner abadi.
Matikan animasi loading via JavaScript tepat saat data tiba (ganti class).

Pola siap salin: tombol loading

css

.tombol.loading {
  pointer-events: none;
  opacity: 0.7;
}

.tombol.loading::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 8px;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: putar 0.7s linear infinite;
  vertical-align: -2px;
}

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

Tambahkan class loading via JavaScript saat submit: spinner mungil di dalam tombol tanpa HTML tambahan.

Rangkuman

Tiga pola loading: spinner (putar), skeleton (kilau gradien), dots (stagger delay). Pilih sesuai konteks konten yang ditunggu.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Skeleton Kartu Profil

Skeleton screen dipakai aplikasi besar karena terasa lebih cepat. Bisa membuatnya adalah skill portofolio yang nyata.

Di playground:

Buat skeleton kartu profil: lingkaran avatar (60px) + 2 baris teks, dengan efek kilau.
Tambahkan prefers-reduced-motion: skeleton menjadi warna statis tanpa animasi.
Di komentar, jelaskan kenapa skeleton dipersepsikan lebih cepat daripada spinner (petunjuk: soal ekspektasi bentuk konten).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox