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
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 achildren
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 totrue
.Centers the spinner horizontally and vertically relative to its containing component.
Default: falseCalled with a reference to the root component.
When using ui/Spinner.Spinner, the
ref
prop is forwarded to this component ascomponentRef
.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 rootcomponent
classspinnerContainer
- Added as a parent in the case of `blockOnClick="container"blockClickOn
- Applied if interaction should be blockedcentered
- Applied if thecentered
prop is presentrunning
- Always applied tocomponent
. Attach animation name property to this class.scrim
- The blocking layer behind the Spinner
Halts the animation of the spinner
Default: falseSets 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 isnull
.Default: false
SpinnerDecoratorHigher-Order Component
Applies Spinner behaviors
import {SpinnerDecorator} from '@enact/ui/Spinner';