ui/Spinner

An unstyled indeterminate progress indicator (Spinner) component to be customized by a theme or application.

Basically, this positions your Spinner component where you want it on the screen, and hooks into the interaction blocking code and scrim management.

The theme using this component must supply a component element which follows the requirements listed by the ui/Spinnerui/Spinner.Spinner.component prop documentation.

Import Usage

import Spinner from '@enact/ui/Spinner';

Members

Spinner   Component

A minimally styled component that controls Spinner positioning and interaction states.

Import Usage

import Spinner from '@enact/ui/Spinner';

Extends: ui/Spinnerui/Spinner.SpinnerBase
Wrapped with: ui/Spinnerui/Spinner.SpinnerDecorator

SpinnerBase   Component

A minimally styled component that controls Spinner positioning and interaction states, without ui/Spinnerui/Spinner.SpinnerDecorator applied.

Import Usage

import {SpinnerBase} from '@enact/ui/Spinner';

Properties

Required Property •  component

StringComponent

A theme-supplied component that performs the animation.

Theme authors can use the css.running class to attach the animation CSS. This element should accept a children prop which takes the form of an optional message for the user.

Unlike most other components, this does not represent the root rendered element, and instead refers to the "spinner" part of this component. The presence of blockClickOn changes the rendering tree and where this is used.

---

blockClickOn

Stringany

Determines how far the click-blocking should extend.

• null does not block clicking

• 'screen' blocks entire screen

• 'container' blocks up to the nearest ancestor with absolute or relative positioning

When blockClickOn is either 'screen' or 'container', a translucent scrim can be added by setting ui/Spinnerui/Spinner.SpinnerBase.scrim prop to true.

---

centered

Boolean

Centers the spinner horizontally and vertically relative to its containing component.

Default: false

---

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Spinnerui/Spinner.Spinner, the ref prop is forwarded to this component as componentRef.

---

css

Object

Customizes the component by mapping the supplied collection of CSS class names to the corresponding internal elements and states of this component.

The following classes are supported:

• spinner - The root component class

• spinnerContainer - Added as a parent in the case of `blockOnClick="container"

• blockClickOn - Applied if interaction should be blocked

• centered - Applied if the centered prop is present

• running - Always applied to component. Attach animation name property to this class.

• scrim - The blocking layer behind the Spinner

---

paused

Boolean

Halts the animation of the spinner

Default: false

---

scrim

Boolean

Sets a scrim behind the spinner with the css.scrim class applied.

Only has an effect when blockClickOn is 'screen' or 'container' and has no effect by default or when blockClickOn is null.

Default: false

SpinnerDecorator   Higher-Order Component

Applies Spinner behaviors

Import Usage

import {SpinnerDecorator} from '@enact/ui/Spinner';

Includes: ui/ForwardRefui/ForwardRef.ForwardRef