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.

Styling

Theme Variables