Note

This documentation describes the Spinner Vue component for native UI views for Xml templates see spinner.

Spinner

An animated loading indicator. Renders a CSS-animated SVG spinner sized by a token class.

Import

import { Spinner } from '@neos/design-system'

Props

Prop	Type	Default	Description
size	'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge'	'medium'	Spinner size

Usage Examples

Inline loading state

<HorizontalLayout space="small" vertical-align="center">
  <Spinner size="small" />
  <Text>Loading data…</Text>
</HorizontalLayout>

Full-page loading overlay

<VerticalLayout align="center" vertical-align="center" style="height: 100%">
  <Spinner size="extralarge" />
</VerticalLayout>

Conditional spinner in a button area

<template v-if="isLoading">
  <Spinner size="small" />
</template>
<template v-else>
  <button label="Save" @click="save" />
</template>