Loading/Spinner (AppSpinner)
Spinner (AppSpinner)
● Ready Web Nuxt 4 + Mobile React Native
Indikator pemuatan berputar vektor dengan berbagai skala ukuran untuk tombol, kartu, dan layar penuh.
<AppSpinner size="medium" />
Skala Ukuran
Samakan ukuran spinner dengan konteksnya: xsmall/small untuk di dalam tombol atau baris tabel, medium untuk kartu/section, dan large/xlarge untuk pemuatan layar penuh. Selalu isi prop label dengan kalimat yang menjelaskan apa yang sedang dimuat (misalnya "Menyimpan jawaban...") alih-alih membiarkan default "Memuat..." di semua tempat — ini yang benar-benar diumumkan ke pengguna pembaca layar.
Spinner Scale
Memuat...
xsmall (14px)Memuat...
small (16px)Memuat...
medium (24px)Memuat...
large (32px)Memuat...
xlarge (48px)Props & API Reference
3 properties| Property | Type | Default | Deskripsi |
|---|---|---|---|
| size | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'medium' | Skala ukuran (14px – 48px), pilih sesuai konteks: tombol/inline vs. layar penuh. |
| appearance | 'inherit' | 'invert' | 'inherit' | 'inherit' memakai warna primary; 'invert' memakai putih untuk latar gelap/berwarna solid. |
| label | string | 'Memuat...' | Teks yang diumumkan ke pembaca layar lewat aria-label dan elemen sr-only. |