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>

<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).

Behaviors

This component supports the following behaviors:

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>

<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>

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

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• ring: The animated ring element of the spinner.

Styling

Theme Variables