ReactJS UI Ant Design Spin Component

A spinner is used for displaying the loading state of a page or a section in our projects. It is basically used when the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively mitigate users’ uneasiness.

Ant Design Library has this component pre-built, and it is very easy to integrate as well. We can use this Spin component using the following approach easily.

Syntax:

<Spin />

Spin Property:

• delay: Defines a delay in milliseconds for the loading animation.
• indicator: React node of the spinning indicator.
• size:  Defines the size of the spinner i.e, small, default, and large.
• spinning: It’s a boolean value that defines whether the spin should spin or not.
• tip: Customize description content when Spin has children.
• wrapperClassName: Specifies the className of the wrapper when Spin has children.

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app demo

Step 2: After creating the React application, enter into it using the following command:

cd demo

Step 3: Now install the antd library using the following command:

npm install antd

Project Structure: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import { Spin } from "antd";
import "./App.css";
import "antd/dist/antd.css";

function App() {
  return (
    <div className="App">
      <div style={{ padding: "100px" }}>
        <h1 style={{ marginBottom: "2rem" }}>
          Demo for Spin
        </h1>
        <Spin size="large" />
      </div>
    </div>
  );
}

export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Reference: https://ant.design/components/spin/