Skip to content
Vy logo
Components​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​​‍‍​‍​‍‌‍​‌‍‌‍​‌‍​‌‌‍​‌‍‍​‌‍‌​‌‌​​‍‍​‌​​‌​​‌​​‌​​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌‌‍​‌‌‍​‍​‍‌​‍​​​‍​‌​​‌​​‌​‍‌‌‍‌‌​‌​​‌‌‍‌‍​‍‌​‌​‌‍​‌​​‌‌‍‌‍​‍‌​‍​​‌‌‌‍‌‌‌‍‌‍​‍‌‌‍‌​​‌‍‌‍‌​​‌‍‌‍‌​‌‍‌‌‌‍​‌‌‍​‌‍‌​‌‍‌​‌‍‌‍‌‍‌‌​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‍​‌‌‌​‌‍‌‌‌‍‌‌‍‌​‍‌‍‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‍​‌‍‌‍​‌‍​‌‌‍​‌‍‍​‌‍‌​‌‌​​‍‌‌​​‌​​‌​‌​​‌​​‌​​‌​​‍‌‍‌‍‍‌‌‍‌​​‌‌‍​‌‌‍​‍​‍‌​‍​​​‍​‌​​‌​​‌​‍‌‌‍‌‌​‌​​‌‌‍‌‍​‍‌​‌​‌‍​‌​​‌‌‍‌‍​‍‌​‍​​‌‌‌‍‌‌‌‍‌‍​‍‌‌‍‌​​‌‍‌‍‌​​‌‍‌‍‌​‌‍‌‌‌‍​‌‌‍​‌‍‌​‌‍‌​‌‍‌‍‌‍‌‌​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‍​‌‌‌​‌‍‌‌‌‍‌‌‍‌​‍‌‍‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

Full screen loader​​​​‌‍​‍​‍‌‍‌​‍‌‍‍‌‌‍‌‌‍‍‌‌‍‍​‍​‍​‍‍​‍​‍‌​‌‍​‌‌‍‍‌‍‍‌‌‌​‌‍‌​‍‍‌‍‍‌‌‍​‍​‍​‍​​‍​‍‌‍‍​‌​‍‌‍‌‌‌‍‌‍​‍​‍​‍‍​‍​‍‌‍‍​‌‌​‌‌​‌​​​‍‍​‍​‍‌‍​‌‍‌‍​‌‍​‌‌‍​‌‍‍​‌‍‌​‌‌​​‍‍​‌​​‌​​‌​​‌​​‍‌‍‍‌‌‍‍‌‌​‌‍‌‌‌‍‍‌‌​​‍‌‍‌‌‌‍‌​‌‍‍‌‌‌​​‍‌‍‌‌‍‌‍‌​‌‍‌‌​‌‌​​‌​‍‌‍‌‌‌​‌‍‌‌‌‍‍‌‌​‌‍​‌‌‌​‌‍‍‌‌‍‌‍‍​‍‌‍‍‌‌‍‌​​‌​‌‌​​‌​‍​​​‍​‍​‌‍‌‍​​‍‌‍‌‍​‍‌‌‍‌‍‌‍​‌‌‍‌‍‌‍​‍​‍‌​‌​​​‌​‌​​​​‍‌​‍​​​​​‌​‍‌​‍‌​‍​​‍​‌‍​‌​​‌​‌​‌‍​‌‍​​‍​‌‍​‍​‌​‌​‍‌​‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‌‍​‍‌‍​‌‌​‌‍‌‌‌‌‌‌‌​‍‌‍​​‌‌‍‍​‌‌​‌‌​‌​​​‍‌‌​​‌​​‌​‍‌‌​​‍‌​‌‍​‍‌‌​​‍‌​‌‍‌‍​‌‍‌‍​‌‍​‌‌‍​‌‍‍​‌‍‌​‌‌​​‍‌‌​​‌​​‌​‌​​‌​​‌​​‌​​‍‌‍‌‍‍‌‌‍‌​​‌​‌‌​​‌​‍​​​‍​‍​‌‍‌‍​​‍‌‍‌‍​‍‌‌‍‌‍‌‍​‌‌‍‌‍‌‍​‍​‍‌​‌​​​‌​‌​​​​‍‌​‍​​​​​‌​‍‌​‍‌​‍​​‍​‌‍​‌​​‌​‌​‌‍​‌‍​​‍​‌‍​‍​‌​‌​‍‌​‍‌‍‌‌​‌‍‌‌​​‌‍‌‌​‌‌‍​‌‌​‍‌‌​‌‍‍‌‌‍​‌‍​‌‍‌‌​‍‌‍‌​​‌‍​‌‌‌​‌‍‍​​‌‌‌​‌‍‍‌‌‌​‌‍​‌‍‌‌​‍‌‍‌​​‌‍‌‌‌​‍‌​‌​​‌‍‌‌‌‍​‌‌​‌‍‍‌‌‌‍‌‍‌‌​‌‌​​‌‌‌‌‍​‍‌‍​‌‍‍‌‌​‌‍‍​‌‍‌‌‌‍‌​​‍​‍‌‌

Full screen loaders are used while the app or app shell is loading.

Examples on light and dark backgrounds

<SimpleGrid columns={[1,2]} gap={6}>
  <LightFullScreenLoader />
  <DarkFullScreenLoader />
</SimpleGrid>