前言
在前端开发中，常常会遇到需要在页面中添加一些 Loading 动画的场景，以提示用户操作正在进行中，避免长时间的等待带来的焦虑感。@oopscurity/react-spinjs 包提供了一个方便易用的解决方案。
安装
通过 npm 安装 @oopscurity/react-spinjs：
npm install @oopscurity/react-spinjs
使用
基本用法
该包提供了两种不同的 Loading 组件：一个基于 FontAwesome 的组件和一个基于 Spin.js 的组件。
基于 FontAwesome 的组件可以通过以下方式使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ---------------------------
----- ----------- - -- -- -
------ -
------------
--------------
---------
---------------
----
--
--
-
------ ------- ------------其中，name、size、color、spin 是 FontAwesome 组件提供的 props，详细说明可以查看 FontAwesome 的官方文档。
基于 Spin.js 的组件使用方式类似：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------------------
----- ----------- - -- -- -
------ -
--------
---------
------ ---
------- ---
------ --
------- ---
------ ----------
--
--
--
-
------ ------- ------------其中，config 是 Spin.js 组件提供的 props，用于设置动画的参数。具体参数的含义可以查看 Spin.js 的官方文档。
进阶用法
可以通过修改组件的 classname 或者 style 来改变 Loading 组件的样式。比如，可以通过自定义样式来修改 FontAwesome 组件的颜色：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- ---------------------------
----- ----------- - -- -- -
------ -
------------
--------------
---------
------------------------
--
--
-
------ ------- ------------.custom-class {
color: #36BDBD;
}对于 Spin.js 组件，可以通过修改 classname 来修改 Loading 动画的样式。可以通过如下方式实现：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------------------------
------ ---------------------
----- ----------- - -- -- -
------ -
--------
---------
------ ---
------- ---
------ --
------- ---
--
------------------------
--
--
-
------ ------- ------------.custom-class {
border-top-color: #36BDBD;
border-left-color: #36BDBD;
border-right-color: #36BDBD;
border-bottom-color: transparent;
}示例代码
可以通过以下代码来测试 Loading 动画的效果：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ------- - ---- ---------------------------
------ ------------
-------- ----- -
------ -
---- ----------------
----------- ---------
---- ----------------------
---- -----------------
------------
--------------
---------
---------------
----
--
----- ----------- - ------- ------
------
---- -----------------
--------
---------
------ ---
------- ---
------ --
------- ---
------ ----------
--
------------------------
--
----- ------- - ------- ------
------
------
------
--
-
------ ------- ------ -------------------- ---- ------- ---- - ----------- ------- -------- ----- - ---------- - -------- ----- ---------------- ------------- ----------- ----- - ----- - ------------- ----- - ------------- - ----------------- -------- ------------------ -------- ------------------- -------- -------------------- ------------ -
总结
通过使用 @oopscurity/react-spinjs 包，我们可以方便快捷地给页面添加 Loading 动画，避免用户长时间等待的焦虑感。同时，该包提供了多种定制化的方式，能够满足不同的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005727b81e8991b448e8acc