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



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

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

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.


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.


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

Default: false

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


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