在现代的前端开发中，我们几乎无法避免使用 loading 动画来提示用户数据正在加载中。为了更加高效和方便地完成这项工作，我们可以使用 npm 包 react-modern-loading-spinner。
安装
在项目根目录下，运行以下命令来安装 react-modern-loading-spinner：
npm install --save react-modern-loading-spinner
使用
在需要使用 loading 动画的页面中，导入 react-modern-loading-spinner：
import LoadingSpinner from 'react-modern-loading-spinner';
然后，在需要显示 loading 动画的位置，使用 LoadingSpinner 组件。
<LoadingSpinner />
此时，你将看到一个默认的 loading 动画。
自定义设置
react-modern-loading-spinner 的默认设置是比较基本的。但是，为了更好的用户体验，在加载过程中，完全可以设置一下自己需要的颜色、尺寸、速度等等。
在组件中，我们可以使用以下属性来设置：
size
设置 loading 动画的大小。默认值为 50。
<LoadingSpinner size={80} />color
设置 loading 动画的颜色。默认值为 #bbb。
<LoadingSpinner color="#5da5da" />
duration
设置 loading 动画的运行时间。默认值为 2s。
<LoadingSpinner duration="1.5s" />
thickness
设置 loading 动画的厚度。默认值为 5。
<LoadingSpinner thickness={10} />示例代码
以下是完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------------------
----- ----------- ------- --------------- -
-------- -
------ -
-----
---------------
---------------
----------
---------------
-------------
--------------
--
-----------------
------
--
-
-总结
使用 npm 包 react-modern-loading-spinner 可以非常轻松地实现自定义 loading 动画，为用户带来更好的体验。通过设置不同的属性，我们可以轻松地控制 loading 动画的大小、颜色、速度和粗细等。使用 react-modern-loading-spinner 将能极大的提升我们前端开发的效率，同时为用户带来更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a630d092702382250c