React Spinner

The Spinner component displays a loading indicator to represent ongoing background operations. It helps maintain visual feedback during data processing or transitions in the interface.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React Spinner component to the project.

Installing Syncfusion® React packages

To use the Spinner component, install the @syncfusion/react-popups package:

npm install @syncfusion/react-popups

Adding CSS reference

Import the Spinner component’s required CSS references in src/App.css.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-popups/styles/material.css';

Adding Spinner component

To include the Spinner component in your application, import the Spinner from the @syncfusion/react-popups package in App.tsx.

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

Add the Spinner in your application as shown below example.

import { Spinner } from '@syncfusion/react-popups';

export default function App() {

    return (
        <div className="component-section">
            <Spinner />
        </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates a basic Spinner with default type and size.

Color

The Spinner component provides color property using this can change the color scheme of the spinner as per requirements. you can set the color property to specify a semantic color, such as Primary, Success, Secondary, Warning, Error and Info, which are mapped to corresponding CSS variables or classes for consistent theming.

Types

The Spinner component provides type property which alters the visual type of the spinner. The Spinner component supports Circular, Cupertino, SingleCircle, and DoubleCircle types.

Sizes

The Spinner component provides the size property to control the overall dimensions of the spinner. This property allows adjusting the spinner to fit different layout requirements, whether it's a compact section or a full-page loading indicator.

Custom Template

The Spinner component allows custom color values using inline styles or CSS variables. This enables precise control over the spinner's appearance beyond predefined semantic colors. Custom colors can be applied to match brand guidelines or specific design themes.

Animation Duration

The Spinner component provides the animationDuration property to control the speed of the spinner's animation. This property accepts time values to define how fast or slow the spinner rotates. Adjusting the duration helps match the spinner's behavior with the context of the operation it represents.

Thickness

The Spinner component provides a thickness property to adjust the width of the spinner stroke. This allows fine-tuning of the visual weight of the spinner, making it more prominent or subtle depending on the context.

Label

The Spinner component supports a label property to display descriptive text alongside the spinner. This can be used to indicate the current operation and improve clarity for the viewer.

Overlay

The Spinner component can be rendered as an overlay using overlay property, covering the entire screen or a specific container. This is useful for blocking interaction during critical operations like form submission or data loading. The overlay ensures that the spinner is prominently visible.

Interactive integration

The Spinner component can be integrated with interactive elements such as buttons, forms, or API calls. This allows the spinner to appear dynamically based on user actions or application state, providing feedback during asynchronous operations.