如何通过 npm 使用 react-loader-spinner 来使用加载动画？

指示加载状态的微调器。我们还可以使用 react-loader-spinner 中可用的 propeTypes 修改微调器的外观、大小和位置。 react-loader-spinner 是一个npm 包 提供 一个简单而有吸引力的 SVG 微调器组件，可用于您的任何项目。该软件包每周的下载量超过 75k。

对于加载器，我们将使用名为react-loader-spinner 的npm 包。它是装载机的一个包。如需深入了解，您可以访问以下链接。

https://www.npmjs.com/package/react-loader-spinner

句法：

;

微调器的类型：所有类型的微调器都可以类似地使用，您只需更改加载器的类型。

• 声音的
• 球三角
• 酒吧
• 界
• 网格
• 红心
• 椭圆形
• 噗
• 戒指
• 尾旋
• 三点

PropTypes：所有类型的微调器都接受这些道具。

• 可见：它是一个布尔值，定义微调器是否可见，默认值为false 。
• type：这个属性定义了微调器的类型。
• height：这个属性定义了 SVG微调器的高度，默认值为 80。
• width：这个属性定义了 SVG 微调器的宽度，默认值为 80。
• color：这个属性定义了微调器的颜色。
• secondaryColor：此道具在平面和 mutatingDots 加载器上可用。
• timeout：这定义了微调器的有效时间。
• radius：此道具设置微调器的半径。

创建 React 应用程序并安装模块：

第 1 步：使用命令创建 React 应用程序。

npx create-react-app foldername 

第 2 步：现在使用此命令进入您的项目文件夹，即文件夹名称。

cd foldername

第 3 步：现在将包安装到您的项目文件夹中。

npm install react-loader-spinner

第 4 步：现在在您的 src 文件夹中创建一个新文件，即 loader.js

项目结构：它看起来像这样。这里我们的文件夹名称是 react_loader。

示例：在此示例中，我们将创建一个加载微调器，为此，我们已经创建了一个组件文件 loader.js。我们将 loadr.js 文件调用到我们的主渲染文件 App.js 中

应用程序.js