Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

ReactJS UI Ant Design Spin Component

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


<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.


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
        <Spin size="large" />
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.


My Personal Notes arrow_drop_up
Last Updated : 24 Mar, 2021
Like Article
Save Article
Similar Reads
Related Tutorials