Components
Examples
Different color spinners
<Stack direction="row" flexDirection="column" justifyContent="center"> <ColorSpinner width="58px" /> <LightSpinner backgroundColor="darkTeal" width="58px" /> <DarkSpinner width="58px" /> </Stack>
Spinner with a descriptive text
<ColorSpinner width="58px"> Fetching tickets </ColorSpinner>
Guidelines
Spinners are small looping animations designed to indicate that content is loading. They should be used in areas with limited space where it's still necessary to show that the page is loading. This could be inside an element or between two sections. You can use a Spinner when pulling down in an app to refresh the page. It can also be placed inside a button when there isn’t enough space for inline loading.
There are three different color variations of spinners – light, colorful, and dark.
If the spinner is used on a larger surface, you can also specify a descriptive text.
Code
<LightSpinner />
import { LightSpinner } from "@vygruppen/spor-react";
Used on dark backgrounds
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Description for why you are waiting |
<DarkSpinner />
import { DarkSpinner } from "@vygruppen/spor-react";
Used on grey backgrounds
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Beskrivelse av hvorfor man venter |
<ColorSpinner />
import { ColorSpinner } from "@vygruppen/spor-react";
Props
Name | Type | Required? | Description |
|---|---|---|---|
children | React.ReactNode | Description for why you are waiting |