Spinner

A spinner is an animated spinning component that lets users know content is being loaded.

Examples

import { Spinner } from "@seduo/design-system";
...
<Spinner size="large" />
...
<Spinner />
...
<Spinner size="small" />
...
<Spinner size="xsmall" />
...
<Spinner theme="dark" size="large" />
...
<Spinner theme="dark" />
...
<Spinner theme="dark" size="small" />
...
<Spinner theme="dark" size="xsmall" />

{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'large'
}} %}
...
{% include "@seduo-design-system/spinner.twig" %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'small'
}} %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'xsmall'
}} %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'large',
    theme: 'dark'
}} %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    theme: 'dark'
}} %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'small',
    theme: 'dark'
}} %}
...
{% include "@seduo-design-system/spinner.twig" with { props: {
    size: 'xsmall',
    theme: 'dark'
}} %}

<Spinner size="large" />
...
<Spinner />
...
<Spinner size="small" />
...
<Spinner size="xsmall" />
...
<Spinner theme="dark" size="large" />
...
<Spinner theme="dark" />
...
<Spinner theme="dark" size="small" />
...
<Spinner theme="dark" size="xsmall" />

API

Prop name	Type	Default	Description
`theme`	Theme dictionary	`light`	spinner theme
`size`	Size dictionary + `xsmall`	`medium`	specifies the size of the spinner

On this page