nt-web-loading npm 包是一个提供了多种加载动画效果的 Web 前端组件，可以让开发者在页面加载过程中显示美观的动画效果，提高用户体验。在本篇文章中，我们将详细介绍如何使用 nt-web-loading。
安装
nt-web-loading 包可以通过 npm 安装：
npm install nt-web-loading --save
使用
在使用 nt-web-loading 之前，首先需要在 HTML 中引入样式文件：
<link rel="stylesheet" href="node_modules/nt-web-loading/dist/nt-web-loading.css">
引入后，我们就可以在 Web 项目中使用此组件。
组件提供的加载动画分为两种：
- 以元素的形式插入到页面中
- 以全屏遮罩的形式展示在页面中间
Element 形式
要在 Web 项目中使用以元素形式插入的加载动画，需要引入加载动画组件并在需要的元素中添加组件作为子元素。例如，在按钮中添加加载动画的代码如下：
-- -------------------- ---- -------
------- -----------------------
---------------
---- --------------- -------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
------
---------在以上代码中，.nt-loading-btn 类为按钮样式，.nt-loading 为包含在按钮中的加载动画组件样式，.nt-loading-dot 为加载动画组件的小圆点样式。
Mask 形式
要在 Web 项目中使用以全屏遮罩的形式展示的加载动画，需要在需要展示遮罩的元素中添加组件。例如，在页面中添加全屏遮罩的代码如下：
-- -------------------- ---- -------
---- -----------------------------
---- --------------- -------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
------
------在以上代码中，.nt-loading-container 为需要展示遮罩的元素样式，.nt-loading 为加载动画组件样式，.nt-loading-dot 为加载动画组件的小圆点样式。
调用
在上述代码中，都包含了 id="nt-loading" 的元素，这个元素就是加载动画的主体元素。在需要显示加载动画的时候，只需要调用 show() 方法即可：
const loading = document.querySelector('#nt-loading');
loading.show();同样，在需要隐藏加载动画的时候，调用 hide() 方法即可：
const loading = document.querySelector('#nt-loading');
loading.hide();示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ----------
----- ---------------- -----------------------------------------------------------
-------
--------------- -
--------- ---------
-------- -------------
-------- ---- -----
----------------- ------- ---- -----
------ ------
---------- -----
-------------- ----
------- -----
------- --------
-
--------------------- -
--------- ---------
---- --
----- --
------ --
------- --
----------------- ------- -- -- -----
-------- -----
---------------- -------
------------ -------
-------- -----
-
--------------- -
-------- -------------
------ -----
------- -----
------------- ----
-------------- ----
----------------- ------
---------- -------------------- ---- ----------- ---------
-
---------- -------------------- -
--- ---- -
---------- ---------
-
--- -
---------- ---------
-
-
--------
-------
------
------- -----------------------
---------------
---- --------------- -------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
------
---------
---- -----------------------------
---- --------------- -------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
----- ------------------------------
------
------
------- ------------------------------------------------------------------
--------
----- ----------- - --------------------------------------
----- ----------- - ------------------------------------------------ --------------
-- ---------------------------------
-- -------- ------ --- ------ --
---------------------------------------------------------- -- -- -
-------------------
------------- -- -
-------------------
-- ------
---
------------------------------------------------------------------------- -- -- -
----------------------
------------- -- -
----------------------
-- ------
--
---------
-------
-------总结
通过本篇文章，我们学习了如何使用 nt-web-loading npm 包，在 Web 前端项目中添加多种加载动画效果。在实际项目中，开发者可以根据自己的需求和样式进行适当的修改和扩展，比如添加不同的加载动画类型和调整样式。使用 nt-web-loading 包可以大大提升用户体验，让您的 Web 项目更加美观和实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f953d1de16d83a66c76