在前端开发中，常常需要为用户提供反馈等待信息，以避免页面变得长时间不响应而导致用户不满。
@jimpick/react-spinner 能够帮助实现这样的功能，它是一款基于 React 的简单的 Loading 动画组件。
在本篇文章中，我们将会介绍如何在你的 React 应用程序中使用 @jimpick/react-spinner，以及通过该组件的属性，如何控制动画的速度、颜色等方面。
安装
要安装 @jimpick/react-spinner，可以使用以下命令：
npm install --save @jimpick/react-spinner
基本使用方法
在你的 React 组件中引入 @jimpick/react-spinner 类型组件：
import { Spinner } from '@jimpick/react-spinner';然后在渲染函数中，将该组件放置在加载位置：
<Spinner />
@jimpick/react-spinner 使用 CSS 动画来控制动画。你需要在你的 HTML 页面的 head 中引入 CSS：
<link rel="stylesheet" href="https://unpkg.com/@jimpick/react-spinner/dist/react-spinner.min.css" />
控制动画
通过组件的 props 可以轻松控制加载动画的很多方面。下面是一些常用的属性：
color
可以通过 color 属性来设置动画的颜色。例如：
<Spinner color="#ff0000" />
duration
可以使用 duration 来控制动画的旋转速度，以毫秒为单位。例如：
<Spinner duration={1000} />thickness
可以使用 thickness 控制加载条的粗细。例如：
<Spinner thickness={5} />size
可以使用 size 属性来定义组件的尺寸。例如：
<Spinner size={50} />示例代码
下面是一个完整的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- -------------------------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
-------- --------------- --
-----------------
---------
------
--
-
------ ------- ----结语
使用 @jimpick/react-spinner，可以轻松地为你的 React 应用程序提供简单的加载动画。本篇文章展示了如何安装和使用 @jimpick/react-spinner，以及如何设置加载动画的基本属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e244345