Css3 (Foto: Text Formatting: Text-Align, Text-Decoration, Text-Transform, Letter-Spacing.)

Animasi Kompleks: Membuat Loading Spinner Kustom dengan CSS

Indikator pemuatan (loading indicator) yang baik memberikan kepastian kepada pengguna bahwa sistem sedang bekerja. Mari kita bedah rahasia di balik pembuatannya.

1. Konsep Dasar Struktur Spinner

Untuk membuat spinner berbentuk lingkaran yang berputar, kita membutuhkan tiga komponen utama:

1. Elemen Kotak Sempurna< /strong>: Menggunakan width dan height yang sama.

Border Melingkar: Menggunakan border-radius: 50% dan memberikan warna berbeda pada salah satu sisi border sebagai penanda putaran.Animasi Infinite: Menggunakan transform: rotate yang berulang selamanya.

2. Tutorial: Membuat "SatuMedia Spinner"

Kita akan membuat spinner yang elegan dengan aksen warna biru yang konsisten dengan tema proyek Anda.

Langkah 1: Struktur HTML

Cukup satu elemen div sederhana.

<div class="loader-container"> <div class="custom-spinner">div> <p>Memuat data...p>
div>

Langkah 2: Definisi Gerakan (@keyframes)

Kita ingin elemen ini berputar penuh secara konstan.

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

Langkah 3: Styling CSS

.loader-container { display: flex; flex-direction: column; align-items: center; gap: 15px;
} .custom-spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; /* Warna dasar (abu-abu muda) */ border-top: 5px solid #3498db; /* Warna aksen (biru) */ border-radius: 50%; /* Menjalankan animasi */ animation: spin 1s linear infinite;
}

3. Variasi Spinner yang Lebih Kompleks

Anda bisa bereksperimen dengan properti untuk mendapatkan gaya yang berbeda:

• Spinner Dua Warna: Berikan warna pada border-top dan border-bottom.

• Efek Halus (Ease): Ubah linear menjadi ease-in-out untuk putaran yang memiliki irama (lambat-cepat-lambat).

• Spinner Tipis: Perkecil nilai border (misal: 2px) untuk kesan minimalis.

Tips Pro untuk Developer

1. Gunakan Border-Right/Left: Jika Anda memberikan warna pada dua sisi yang berdekatan (misal top dan right), Anda akan mendapatkan efek "busur" yang lebih panjang.

2. Aksesibilitas: Selalu tambahkan teks pendamping (seperti "Loading...") atau gunakan atribut aria-live="polite" agar pengguna dengan alat bantu dengar tahu bahwa ada proses yang sedang berjalan.

3. Centered Position: Jika spinner ini muncul saat aplikasi Laravel Anda sedang melakukan fetching API (misalnya saat sinkronisasi di aplikasi Kolak Pisang), gunakan overlay dengan position: fixed dan z-index tinggi agar spinner berada tepat di tengah layar dan menutupi konten lain.

/* Contoh overlay spinner */
.overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center;
}

Dengan menguasai teknik ini, Anda tidak perlu lagi bergantung pada library eksternal hanya untuk sebuah indikator pemuatan data!