CoreSplashScreen
Примеры использования и документация.
Полноэкранный splash: мозаика из квадратов логотипа, по сетке диагональной волной течёт flow-градиент; случайные ячейки дышат масштабом, случайная вспыхивает яркостью на 2с — следующая через 100–300мс; курсор зажигает ячейку. role="status" + пауза волны (SC 2.2.2); закрывается только через v-model.
Мозаика строится на клиенте, когда известны реальные размеры экрана; до гидратации видны только логотип, подпись и фон на весь экран — их критические стили инлайнятся в <head> из app/app.vue (без мерцания при гидрации). Плитки появляются каскадом: каждая масштабируется от 0 до 1 из центра своей ячейки, задержка каждой следующей — +10 мс; волна идёт по диагонали от левого верхнего угла. При prefers-reduced-motion каскад отключён — мозаика видна сразу.
Доступность
- Корень —
role="status"с именем: пропсlabelили локализованное «Загрузка» (coreSplashScreen.loading) — скринридер объявляет загрузку; вся мозаика —aria-hidden. - Бесконечные волна, дыхание и вспышки — SC 2.2.2: пауза через проп
paused, авто-пауза в фоновой вкладке (visibilitychange) и полная статика приprefers-reduced-motion; fade появления/скрытия тоже отключается. - Прогресс-полоса декоративна (
aria-hidden) — значение уже объявляетrole="status". - Экран закрывается только через
v-model— ловушки фокуса нет, это не модалка. Зависшую загрузку снимает Esc (dismissible, включён по умолчанию) — клавиатурный выход из полноэкранного состояния.