Spinner Component

Spinner shows a lightweight loading indicator for pending operations. It supports multiple styles (Circular, Cupertino, SingleCircle, DoubleCircle), configurable size and thickness, theme colors, and a fullscreen overlay mode. Example

Usage

To import and use the Spinner component in your application, use the following code snippet:

import { Spinner, SpinnerType, Color } from "@syncfusion/react-popups";

export default function App() {
return (<Spinner label="Loading data…" type={SpinnerType.Circular} size={36} color={Color.Primary} />);
}

import { Spinner, SpinnerType, Color } from "@syncfusion/react-popups";

export default function App() {
return (<Spinner label="Loading data…" type={SpinnerType.Circular} size={36} color={Color.Primary} />);
}

Demos

Explore the demos of the React Spinner component. Refer to this page.

Props

The following table outlines the props for the Spinner component:

Name	Type	Default	Description
animationDuration	string	'1s'	Specifies the animation duration for spinner effects such as rotation, fade, or pulse. Accepts values like '1s' or '800ms'.
color	Color	Color.Primary	Specifies the Color style of the spinner. Options include 'Primary', 'Secondary', 'Warning', 'Success', 'Error', and 'Info'.
label	string	-	Specifies optional text displayed next to the spinner. Recommended for accessibility when the surrounding UI lacks context.
overlay	boolean	false	Specifies whether the spinner should render as a fullscreen fixed overlay with a dimmed backdrop.
size	string \| number	36px	Specifies the spinner size. number: interpreted as pixels (e.g., 40 → 40px) string: supports 'px' and 'em' units (e.g., '40px', '2em')
thickness	string	'3px'	Specifies the stroke thickness for circular variants. Accepts any valid CSS length (e.g., '3px').
type	SpinnerType	SpinnerType.Circular	Specifies the visual style of the spinner. Available options (SpinnerType): Circular: Single circular stroke with continuous rotation Cupertino: Fading tick marks around a circle (iOS-style) SingleCircle: Dashed single circle rotating DoubleCircle: Two concentric dashed circles animating
visible	boolean	true	Specifies whether the spinner is visible. When set to false, renders null.