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/
