Spinner component is an animated icon that lets users know content or result of an action is being loaded.
import { Spinner } from "@kesko/components";
export default () => <Spinner size="md" />;<k-spinner></k-spinner>import { Spinner } from "@kesko/components";
export default () => <Spinner size="md" style={{ color: "var(--k-color-accent)" }} />;<k-spinner style="color: var(--k-color-accent)"></k-spinner>import { Spinner, Stack } from "@kesko/components";
export default () => (
<Stack direction="row" gap="md" align="center">
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
<Spinner size="xl" />
<Spinner size="2xl" />
</Stack>
);<k-stack direction="row" gap="md" align="center">
<k-spinner size="sm"></k-spinner>
<k-spinner size="md"></k-spinner>
<k-spinner size="lg"></k-spinner>
<k-spinner size="xl"></k-spinner>
<k-spinner size="2xl"></k-spinner>
</k-stack>Props
| Name | Description | Type | Default |
|---|---|---|---|
size | The size of the spinner. | "sm" | "md" | "lg" | "xl" | "2xl" | "md" |
label | Accessible label for the spinner. Defaults to "Loading". | string | "Loading" |
CSS custom properties
CSS custom properties provide finer-grained control than props. Prefer the props API when it suits your need.
| Name | Description | Default |
|---|---|---|
--k-spinner-color | Overrides the spinner color. | currentColor |
--k-spinner-size | Overrides the spinner size. | var(--k-size-component-spinner) |