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.
- 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:
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.
Step to Run Application: Run the application using the following command from the root directory of the project.
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.