在前端开发中，我们经常需要处理各种异步请求、数据加载等操作。为了更好地提升用户体验，我们需要在页面中添加 Loading 效果，提示用户当前操作正在进行中。
而 npm 包 Loading 就是帮助我们实现这个效果的工具之一。本文将从以下几个方面详细介绍 npm 包 Loading 的使用方法。
安装 Loadings
我们可以通过 npm 命令来安装 Loadings：
npm install loadings --save
加载 Loadings
安装完成 Loadings 后，我们需要在项目中引入该包。如下所示：
import Loadings from 'loadings';
使用 Loadings
基本用法
使用 Loadings 的基本方法为：
const loading = new Loadings({
target: '', //设置要添加 loading 效果的容器元素
options: {} //配置项
});
loading.show(); //显示 loading 效果
loading.hide(); //隐藏 loading 效果其中，options 配置项包括以下属性：
type: loading 类型。可选值为spin(旋转图片) 或bar(进度条)，默认为spin。color: loading 颜色。默认为#fff。size: loading 尺寸。默认为30px。duration: loading 动画时长。默认为1s。text: loading 文本。默认为loading...。backgroundColor: loading 背景色。默认为rgba(0, 0, 0, .7)。
下面，我们可以看一个具体的例子：
-- -------------------- ---- -------
------ -------- ---- -----------
----- --------- - -------------------------------------
----- ------- - --- ----------
------- ----------
-------- -
----- ------
------ -------
----- -------
--------- ------
----- -------------
---------------- ---------- ---- ---- ----
-
---
---------------在该例子中，我们创建了一个 id 为 container 的容器元素，然后将该元素作为 Loading 要添加效果的容器，并且指定了相关配置项。最后，通过 loading.show() 方法来显示 loading 效果。
Loading 嵌套
当我们需要在一个较大的容器中显示多个 loading 效果时，我们可以使用 Loadings 的嵌套功能。使用该功能，我们可以创建多个 Loading 对象，然后嵌套在一个容器中，从而实现多个 Loading 效果的同时进行展示。
具体示例如下：
-- -------------------- ---- -------
------ -------- ---- -----------
----- --------- - -------------------------------------
----- -------- - --- ----------
------- ----------
-------- -
----- ------
------ -------
----- -------
--------- ------
----- -------------
---------------- ---------- ---- ---- ----
-
---
----- -------- - --- ----------
------- ----------
-------- -
----- -------
------ -------
----- -------
--------- ------
----- ---------
---------------- -------- -- -- ----
-
---
----------------
----------------
------------- -- -
----------------
----------------
-- -----在该代码中，我们创建了两个 Loading 对象，并且将它们都添加到了 id 为 container 的容器中。最后，我们通过 setTimeout() 方法来控制 loading 效果的显示和隐藏。
总结
Loadings 是一个轻量级的 Loading 效果库。在本文中，我们详细介绍了 Loadings 的安装、加载和使用技巧，并且给出了具体的实例代码。希望本文对于大家的学习和实践具有一定的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106884