Spinner component is an animated icon that lets users know content or result of an action is being loaded.

Open in new tab 
import { Spinner } from "@kesko/components";

export default () => <Spinner size="md" />;
import { Spinner, Stack } from "@kesko/components";

export default () => (
  <Stack direction="row" gap="md" align="center" style={{ color: "var(--k-color-accent)" }}>
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
    <Spinner size="xl" />
    <Spinner size="2xl" />
  </Stack>
);

Props

NameTypeDefaultDescription
size"sm" | "md" | "lg" | "xl" | "2xl""md"

The size of the spinner.

labelstring"Loading"

Accessible label for the spinner. Defaults to "Loading".

CSS custom properties

CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.

NameDescriptionDefault
--k-spinner-color

Overrides the spinner color.

currentColor
--k-spinner-size

Overrides the spinner size.

var(--k-size-component-spinner)