Skip to content
Vy logo
  • Identitet
  • Spor
  • Resources
Components

Full screen loader

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

FigmaGitHubReact Native

Examples

Examples on light and dark backgrounds

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

Guidelines

Full-screen loaders should be used when launching a service, app, or feature to indicate that content is loading. They can also be used when there is a need to refresh data within a service. The purpose is to preload as much content as possible before the user gains access to the functionality.

They should not be used for loading small amounts of content or in cases where another loading method would be more appropriate.

Full-screen loaders should be used sparingly, as they can disrupt the user experience.

They are available in both a light and a dark variant.

Code

<LightFullScreenLoader />

import { LightFullScreenLoader } from "@vygruppen/spor-react";

Dark logo on white background

<DarkFullScreenLoader />

import { DarkFullScreenLoader } from "@vygruppen/spor-react";

White logo on green background