component · platform-aware chrome
TuxSplashScreen
Branded app-launch overlay for Tauri shells. Shown while the WebView mounts the Vue app and any first-paint data loads. Covers the viewport with the TTI brand mark + maroon hairline + optional status text. Fades out when
loaded flips true (with a short delay to let Tauri's window-show event settle). basic
Default brand mark
Click below to preview the splash for ~1.8 seconds. In a real Tauri shell, host the splash from app.vue and bind loaded to your "app-ready" signal (Pinia store, first API response, etc.).
TTI
Texas A&M Transportation Institute
Loading…
<tux-splash-screen :loaded="appReady" />with status + footer
Custom copy
Override the default "Loading…" status with anything load-stage- specific ("Connecting to TTI data…"). Use the #footer slot for a version pill or build hash.
Showcase note
The splash above is the same component instance; preview it via the button to see the alternate status copy.
accessibility
aria-busy + reduced motion
The splash sets role="status" + aria-busy="true" + aria-live="polite" so assistive tech announces the app-loading state. With prefers-reduced-motion: reduce, the fade collapses to a near-instant transition (80ms).