Spinner

Spinner is an animated indicator that represents an action in progress with no deterministic progress value.

While it is visible, the action is yet to be completed; on completion, the UI logic may opt to remove the component.

Using the `Spinner`

<App>
  <Spinner />
</App>

Example: using Spinner

<App>
  <Spinner />
</App>

Spinner ignores the width, minWidth, maxWidth, height, minHeight, and maxHeight properties. If you want to change its size, use the size-Spinner theme variable (see details is the Styling section).

Properties

`delay` (default: 400)

The delay in milliseconds before the spinner is displayed.

Use the buttons to toggle between the two Spinners.

<App>
  <variable name="noDelay" value="{true}" />
  <variable name="yesDelay" value="{false}" />
  <HStack gap="$space-0_5">
    <Button label="No delay" onClick="noDelay = true; yesDelay = false;" />
    <Button label="1000 ms delay" onClick="noDelay = false; yesDelay = true;" />
  </HStack>
  <Spinner when="{noDelay}" delay="0" />
  <Spinner when="{yesDelay}" delay="1000" />
</App>

Example: delay

<App>
  <variable name="noDelay" value="{true}" />
  <variable name="yesDelay" value="{false}" />
  <HStack gap="$space-0_5">
    <Button label="No delay" onClick="noDelay = true; yesDelay = false;" />
    <Button label="1000 ms delay" onClick="noDelay = false; yesDelay = true;" />
  </HStack>
  <Spinner when="{noDelay}" delay="0" />
  <Spinner when="{yesDelay}" delay="1000" />
</App>

`fullScreen` (default: false)

If set to true, the component will be rendered in a full screen container.

<App>
  <Spinner fullScreen="true" />
</App>

Example: fullScreen

<App>
  <Spinner fullScreen="true" />
</App>

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

Theme Variables

Variable	Default Value (Light)	Default Value (Dark)
borderColor-Spinner	$color-surface-400	$color-surface-400
size-Spinner	$space-10	$space-10
thickness-Spinner	$space-0_5	$space-0_5