BAB 19 – SPINNER DAN LOADING SCREEN
Tujuan Pembelajaran
Peserta mampu:
- Membuat animasi loading.
- Memberikan feedback kepada pengguna.
- Membuat tampilan profesional.
A. Mengapa Loading Penting?
Ketika sistem sedang:
- Menyimpan data
- Menghapus data
- Mengambil data database
pengguna perlu mengetahui bahwa proses sedang berjalan.
B. Spinner Dasar
<div class="spinner-border">
</div>Praktik 1
<div class="spinner-border text-primary">
</div>C. Growing Spinner
<div class="spinner-grow text-success">
</div>Praktik 2
Buat halaman:
Memuat Data Siswa...disertai spinner.
D. Full Screen Loading
<div class="vh-100
d-flex
justify-content-center
align-items-center">
<div class="spinner-border">
</div>
</div>Latihan Bab 20
- Apa fungsi Spinner?
- Apa fungsi spinner-border?
- Apa fungsi spinner-grow?
- Mengapa loading diperlukan?
- Apa fungsi vh-100?