Open In App

ReactJS UI Ant Design Spin Component

Improve
Improve
Like Article
Like
Save
Share
Report

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/


Last Updated : 24 Mar, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads