MoreLesson 181Preview gratis
Loaders
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas loader, yaitu animasi yang menunjukkan bahwa suatu proses sedang berlangsung. Loader sering dibuat dengan CSS saja menggunakan border berputar atau animasi keyframes. Selain tampilan, status memuat sebaiknya diumumkan ke pembaca layar dan animasi dihentikan bagi pengguna yang memilih reduced motion.
Poin kunci
- Buat lingkaran dengan border, lalu beri warna berbeda pada satu sisi untuk efek berputar
- Gunakan @keyframes dan animation untuk memutar elemen terus-menerus
- Tambahkan teks status atau role="status" agar pembaca layar mengetahui proses sedang berjalan
- Hormati prefers-reduced-motion dengan mematikan atau menyederhanakan animasi
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.