eds-spinner

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React

In fullscreen={false} a parent div with defined dimensions must exist.

In Vue

In fullscreen={false} a parent div with defined dimensions must exist.

Properties

Property	Attribute	Description	Type	Default
`background`	`background`	Background overlay color	`string`	`'var(--grey-light)'`
`fullscreen`	`fullscreen`	When true, the spinner covers the entire viewport.	`boolean`	`false`
`message`	`message`	Optional message displayed below the spinner.	`string`	`undefined`
`size`	`size`	Size preset: ‘xs’ \| ‘md’ \| ’lg’ \| ‘xl’	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`
`variant`	`variant`	Color variant:	`"primary" \| "secondary"`	`'secondary'`

Dependencies

Used by

Graph

graph TD;
  eds-gitlab-contributors --> eds-spinner
  eds-global-search --> eds-spinner
  eds-kg-learning-resources --> eds-spinner
  style eds-spinner fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS