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

Content loader

Content loaders are used to entertain the user while they wait for a longer operation.

FigmaGitHubReact Native

Examples

A large content loader

<ContentLoader>
  Please wait while we find your tickets
</ContentLoader>

A smaller content loader you can use inside other elements

<Stack direction="row" flexDirection="column" justifyContent="center">
  <ColorInlineLoader width="80px" />
  <DarkInlineLoader width="80px" />
  <LightInlineLoader width="80px" backgroundColor="darkTeal" />
</Stack>

Guidelines

Content loaders are fun animations used when waiting for something that takes several seconds.

There is a large version that can cover entire sections at a time.

There are also three smaller versions that work well in compact contexts, such as inside buttons or table cells, for example.

Code

<ContentLoader />

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

Props

Name
Type
Required?
Description
childrenReact.ReactNodeDescription of why the user is waiting

<LightInlineLoader />

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

Used on dark backgrounds, inside smaller surfaces

<DarkInlineLoader />

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

Used on light backgrounds, inside smaller surfaces

<ColorInlineLoader />

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

Used inside smaller surfaces