enact logoEnact
Edit on GitHub

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 component prop documentation.

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

Members

SpinnerComponent

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

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

SpinnerBaseComponent

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

import {SpinnerBase} from '@enact/ui/Spinner';
Properties
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
Stringnull

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

SpinnerDecoratorHigher-Order Component

Applies Spinner behaviors

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