在前端开发中，有时需要在加载数据或执行一些耗时操作时展示 loading 状态，为用户提供更好的体验。而 simple-loading 就是一款可以快速创建 loading 状态的 npm 包，本文将介绍如何使用它并讲解其原理。
安装 simple-loading
使用 npm 安装 simple-loading：
npm install simple-loading
使用 simple-loading
-- -------------------- ---- ------- ------ ------- ---- ---------------- -- ---- ------- -- ----- ------- - --- --------- ----- ------------ -- ----------- -- -- -------- --------------- -- ------ -------------
原理解析
simple-loading 的核心原理是通过创建一个遮罩层并在遮罩层上展示一个加载动画。下面我们来看具体实现。
创建遮罩层
-- -------------------- ---- ------- ----- ---- - ----------------------------- ------------------- - ------- -------------- - - --------------- - - ---------------- - - ----------------- - - ----------------- - ---- -------------------------- - ----------------- -------------------------------
我们先创建一个 div 元素作为遮罩层，并设置其样式为全屏、半透明黑色。
创建 loading 动画
-- -------------------- ---- -------
----- ------- - -----------------------------
---------------------- - ----------
------------------ - -----
----------------- - -----
----------------------- - ----------------- -----------------
-------------------------- - -----
-------------------- - ---- ----- -----
---------------------------- - ------
------------------- - ------
-------------------- - ------
----------------------- - ----- ---- ------ ---------
-------------------------
----- ----- - -------------------------------
--------------- - -
---------- ---- -
---- ----------- --------------
-- ----------- ----------------
-
-
--------------------------------我们再创建一个 div 元素作为 loading 动画，并设置其样式为固定在遮罩层中间、算法样式为旋转、边框样式为白色粗边框、上边框设置为灰色、动画为旋转动画。在创建 loading 动画时，我们还需要动态在 head 元素中添加样式表，以添加旋转动画。
显示/隐藏 loading
显示 loading 时，我们直接将遮罩层插入到页面中并设置 display: block。隐藏 loading 时，直接将遮罩层的 display 设置为 none。
-- -------------------- ---- -------
----- ------- -
-- ----
-------------------- -
------------ - -------
--------- - ----
------------ - ----
-------------
-
-- ------ ------- --
-------- -
-- -----
--------- - -----------------------------
------------------------ - -------
------------------- - -
-------------------- - -
--------------------- - -
---------------------- - -
---------------------- - ----
------------------------------- - -----------------
------------------------------------
-- -- ------- --
------------ - -----------------------------
--------------------------- - ----------
----------------------- - -----
---------------------- - -----
---------------------------- - ----------------- -----------------
------------------------------- - -----
------------------------- - ---- ----- -----
--------------------------------- - ------
------------------------ - ------
------------------------- - ------
---------------------------- - ----- ---- ------ ---------
-----------------------------------
-- -----
----- ----- - -------------------------------
--------------- - -
---------- ---- -
---- ----------- --------------
-- ----------- ----------------
-
-
--------------------------------
-
-- ---- -------
------- -
----------------------- - -------
-
-- ---- -------
----- -
----------------------- - ------
-
-至此，我们就完成了使用 simple-loading 创建 loading 的全部过程。当然，我们也可以根据自己的需求进行扩展，比如为 loading 添加不同的样式、动画效果等。
总结
通过本文的介绍，我们了解了如何使用 npm 包 simple-loading 创建 loading 状态，并对其实现原理进行了详细讲解。掌握 simple-loading 的使用方法可以方便开发者快速为页面添加 loading 状态，为用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005565881e8991b448d332f