Components

Spinner

Spinner is used to indicate that content or an action is loading, and that the user must wait before they can continue.

HTML

HTMLReact

Press Enter to start editing

Unable to parse html

const PreviewEn = () => {
  return <Spinner aria-label='Loading coffee' />;
};

render(<PreviewEn />)

Usage

Add the class name ds-spinner to an <svg> tag to create a spinner. The <svg> should have two <circle> elements inside it to create the spinner.

CSS variables and data attributes

Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.

CSS Variables
Name	Value
--dsc-spinner-background	var(--ds-color-surface-tinted)
--dsc-spinner-stroke	var(--ds-color-border-default)
--dsc-spinner-animation-duration	2s

No relevant data attributes found.

React

import { Spinner } from "@digdir/designsystemet-react";
<Spinner aria-label="Loader" />;

aria-label
Description: Accessibile label Defines a string value that labels the current element. @see aria-labelledby.
Type: string

Name	Type	Default	Description
aria-label	`string`	-	Accessibile label Defines a string value that labels the current element. @see aria-labelledby.

Edit this page on github.com (opens in a new tab)