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