Spinner

The Spinner component is an animated indicator that represents a particular action in progress without a 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>

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>

fullScreen (default: false)

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

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

themeColor

(NOT IMPLEMENTED YET) The theme color of the component.

Events

This component does not have any events.

Exposed Methods

This component does not expose any methods.

Styling

The Spinner has the following theme variables:

• borderColor-Spinner
• size-Spinner
• thickness-Spinner

{
  "id": "custom",
  "name": "Custom Theme",
  "themeVars": {
    "size-Spinner": "3rem",
    "thickness-Spinner": "8px",
    "borderColor-Spinner": "red"
  }
}

Theme Variables