ReactJS UI Ant Design Spin 组件

微调器用于显示我们项目中页面或部分的加载状态。基本上是在页面等待异步数据或者渲染过程中使用，适当的加载动画可以有效缓解用户的不安。

Ant Design Library 已经预先构建了这个组件，并且它也很容易集成。我们可以通过以下方法轻松使用这个 Spin 组件。

句法：

自旋属性：

• delay：定义加载动画的延迟时间（以毫秒为单位）。
• 指标：旋转指标的反应节点。
• size：定义微调器的大小，即小、默认和大。
• 旋转：这是一个布尔值，定义旋转是否应该旋转。
• 提示：当 Spin 有孩子时自定义描述内容。
• wrapperClassName：当 Spin 有子时，指定包装器的类名。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app demo

第 2 步：创建 React 应用程序后，使用以下命令进入它：

cd demo

第 3 步：现在使用以下命令安装antd库：

npm install antd

项目结构：它将如下所示。

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import { Spin } from "antd";
import "./App.css";
import "antd/dist/antd.css";
  
function App() {
  return (
    

      

        

          Demo for Spin
        
        
      
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出。

参考： https://ant.design/components/spin/