在前端开发中，我们经常需要展示一个等待加载的效果。 please-wait 是一个基于 SVG 动画的轻量级 npm 包，提供了多种预设等待效果和自定义配置选项。在本文中，我将为大家介绍如何使用 please-wait 这个 npm 包。
安装
使用 npm 命令行工具安装 please-wait：
npm install please-wait --save
初始化
首先，我们需要引入 please-wait 并创建一个实例：
-- -------------------- ---- -------
------ ------ ---- --------------
----- ------ - ----------------------------------
----- ------ - --- --------
-------
---------------- ----------
------------ ----- --------------------------------------------------- -------------------------
------------------------------------------------------------------------------------------------------
---其中，target 是要展示等待效果的元素节点；backgroundColor 是背景颜色；loadingHtml 是 SVG 图片的 HTML 内容。
该实例创建后，等待效果会被添加到 target 的子元素中。同时，Please 还提供了其他一些配置选项，比如 text、logo 等，可以根据实际需求进行设置。
显示/隐藏等待效果
在需要显示等待效果的地方，我们可以调用 please 实例的 show() 方法：
please.show();
而当等待任务完成后，我们可以调用 please 实例的 hide() 方法：
please.hide();
示例代码
下面是一个完整的使用示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------ ------------
-------
------
---- ------------------
------- --------------------------------------------------------------------------------------
--------
----- ------ - ----------------------------------
----- ------ - --- --------
-------
---------------- ----------
------------ ----- --------------------------------------------------- -------------------------
------------------------------------------------------------------------------------------------------
---
-- -----------
-------------------------------------------------------- -- -- -
--------------
------------- -- -
--------------
-- ------
---
---------
------- ----------------------
-------
-------在这个示例中，我们创建了一个 div 元素作为等待效果的目标节点，并在页面底部添加了一个按钮。当用户点击按钮时，展示等待效果 3 秒钟后自动隐藏。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34709