随着前端技术的不断发展，页面加载速度已经成为用户体验的关键点之一。而在页面加载时，通常需要展示一个loading效果来提示用户正在加载。本文将介绍如何制作一个自定义的loading效果组件，并演示如何在Custom Elements中使用它。
制作自定义的Loading效果组件
要制作自定义的loading效果组件，需要用到CSS动画技术。下面以一个简单的三个小球灌木效果为例，来介绍如何制作自定义Loading效果组件。
HTML结构:
<div class="loading"> <div class="ball"></div> <div class="ball"></div> <div class="ball"></div> </div>
CSS样式:
-- -------------------- ---- -------
-------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
-
----- -
------ -----
------- -----
------------- ----
-------------- ----
----------------- -----
---------- --------- -- ------------------ ----- ----- -- ---------
-
-------------------- -
---------------- -------
-
-------------------- -
---------------- -------
-
---------- --------- -
-- -
---------- --------------- ------------------
-
--- -
---------- --------------- -----------------
-
---- -
---------- --------------- ------------------
-
-在上述的代码中，.loading 是外层容器，.ball是三个小球灌木效果对应的DOM集合。 .ball通过CSS动画实现了小球的往返运动。
在Custom Elements中使用自定义的Loading效果组件
Custom Elements 是用于开发自定义的HTML元素的标准。使用它可以定义一些自定义的标签，比如 <my-loading></my-loading>。
下面将以 <my-loading>为例，介绍如何将自定义的Loading效果组件嵌入到自定义元素当中：
HTML结构:
<my-loading></my-loading>
JavaScript Code:
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ------ - ------------------- ----- ------ ---
----- -------- - -----------------------------------
------------------ - -
-------
-------- -
-------- -----
---------------- -------
------------ -------
------ -----
------- -----
-
----- -
------ -----
------- -----
------------- ----
-------------- ----
----------------- -----
---------- --------- -- ------------------ ----- ----- -- ---------
-
-------------------- -
---------------- -------
-
-------------------- -
---------------- -------
-
---------- --------- -
-- -
---------- --------------- ------------------
-
--- -
---------- --------------- -----------------
-
---- -
---------- --------------- ------------------
-
-
--------
---- ----------------
---- -------------------
---- -------------------
---- -------------------
------
--
-----------------------------------------------------
-
-
----------------------------------- -----------在上述代码中，定义了一个 MyLoading 类，该类将自定义元素 <my-loading> 和自定义的Loading动画组件进行了组合。
定义Custom Element使用customElements.define()函数。在这个函数中传入自定义元素名及实现了自定义提示组件的类。
在 constructor()方法中，通过该元素的 this.attachShadow() 方法来创建Shadow DOM。然后将模板字符串赋值 template，并添加到 Shadow DOM 中。这里我们采用从模板中创建 <template> 元素来作为渲染实际元素内容的手段，通过template.content.cloneNode(true)来将 template 元素内容复制到 shadowRoot 内。
最后，就可以像普通的 HTML 元素一样使用 <my-loading> 标签了。
总结
本文介绍了如何制作自定义的loading效果组件，并演示了如何在Custom Elements中使用它。如果你是一个前端开发工程师，自定义loading效果组件已经成为了一个必备技能。自定义Loading效果组件的好处很多：它们可以适应您的应用的需求，而且通常比传统的loading效果组件更快且更流畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eee934f6b2d6eab38e877d