如何使用 Material Design 实现自定义 loading 组件
Material Design 是由 Google 推出的一套设计规范，旨在为开发人员提供一致、美观的用户体验。在前端开发中，Material Design 经常被用来作为 UI 设计的基础，它提供了丰富的组件库供开发人员使用。
Loading 组件是前端开发中的常见需求，它通常用来在页面加载资源时显示加载进度。在本篇文章中，我们将学习如何使用 Material Design 实现自定义 loading 组件。
Material Design Loading 组件
首先，让我们来了解一下 Material Design 中提供的 Loading 组件。在 Material Design 中，Loading 组件通常用于表示等待、进度和待定状态。它们可以帮助用户理解操作的当前状态，并向他们提供反馈。
Material Design 中的 Loading 组件有两种类型：Circular（圆形）和 Linear（线性）。两种类型的组件可以分别用于不同的场景。下面分别介绍这两种组件的实现方式。
Circular Loading 组件
圆形 Loading 组件通常用于较短时长的等待状态中，例如：页面资源在加载中，但不会占用过多时间。下面是一个样例：
上图所示的组件提供以下几个属性：
- size：组件的大小（默认为 40px）。
- thickness：组件的边框宽度（默认为 3.6px）。
- color：组件的颜色。
可以使用如下代码创建 Circular Loading 组件：
<div class="circular-loading"> <div class="circular-loading-inner"></div> </div>
-- -------------------- ---- -------
----------------- -
--------- ---------
------ -----
------- -----
-
----------------------- -
--------- ---------
---- ----
----- ----
------ -----
------- -----
------- ----- - - ------ -- -- --
-------------- ----
------- ----- ----- ------- -- -- ------
----------------- -------- -- -- --
---------- ----------------------- -- ------ ---------
-
---------- ----------------------- -
-- -
---------- ---------------
-
-在上面的代码中，我们通过 animation 属性实现了组件的旋转。同时，我们使用了 CSS3 的 border-radius 和 RGBA 颜色来创建圆形和半透明效果。
Linear Loading 组件
线性 Loading 组件用于长时间等待和占用大量资源的情况。下面是一个示例：
上图所示的组件提供以下几个属性：
- height：组件的高度（默认为 4px）。
- color：组件的颜色。
可以使用以下代码创建 Linear Loading 组件：
<div class="linear-loading"> <div class="linear-loading-inner"></div> </div>
-- -------------------- ---- -------
--------------- -
--------- ---------
------ -----
------- ----
----------------- ------- -- -- ------
-
--------------------- -
--------- ---------
---- --
----- --
-------- ------
------ ---
------- ----
----------------- -------- -- -- --
---------- -------------------- ---- ----------- ---------
-
---------- -------------------- -
-- -
---------- ------------------
-
--- -
---------- -----------------
-
---- -
---------- -----------------
-
-在上面的代码中，我们通过 animation 属性实现了组件的滑动动画。我们使用了 CSS3 的 transform 属性来实现组件的滑动效果。
自定义 Material Design Loading 组件
现在，我们已经了解了 Material Design 中提供的 Loading 组件，并且可以通过代码创建它们。但是如果想要创建一个自定义的 Loading 组件，应该如何进行呢？
下面，我们以一个圆形 Loading 组件为例，讲解如何自定义一个 Material Design Loading 组件。
步骤 1：创建 wrapper HTML 元素
在 HTML 文件中创建一个包含自定义 Loading 组件的 wrapper 元素。wrapper 元素需要设置相对定位：
<div class="custom-loading"> <div class="custom-loading-inner"></div> </div>
.custom-loading {
position: relative;
width: 64px;
height: 64px;
}步骤 2：创建内部 HTML 元素
在 wrapper 元素中创建一个内部元素，用于实现 Loading 动画。并设置其绝对定位：
<div class="custom-loading"> <div class="custom-loading-inner"></div> </div>
-- -------------------- ---- -------
--------------------- -
--------- ---------
-------------- ----
------ -----
------- -----
------- --- ----- ------------
----------------- --------
---------- --------------------- -- ------ ---------
-
---------- --------------------- -
-- -
---------- ---------------
-
-在上面的代码中，我们创建了一个内部元素，并使用 CSS3 的 border-radius 和 border 属性创建了一个圆形元素。我们使用了动画属性，实现了旋转效果。
步骤 3：调整属性
可以通过调整 wrapper 元素和内部元素的大小来调整圆形 Loading 组件的大小。也可以通过调整 border-width 属性和 border-top-color 属性来调整边框宽度和颜色。例如：
-- -------------------- ---- ------- --------------- - --------- --------- ------ ----- ------- ----- - --------------------- - ------- ----- ----- ------------ ----------------- -------- -
在上面的代码中，我们通过设置 wrapper 元素的宽高为 40px 调整了组件的大小。通过设置 border 属性和 border-top-color 属性，实现了组件的颜色和边框宽度调整。
示例代码
如下是一个 Material Design 风格的自定义 Loading 组件的示例代码。可以通过修改 wrapper 元素和内部元素的属性来自定义组件。
<div class="custom-loading"> <div class="custom-loading-inner"></div> </div>
-- -------------------- ---- -------
--------------- -
--------- ---------
------ -----
------- -----
-
--------------------- -
--------- ---------
-------------- ----
------ -----
------- -----
------- --- ----- ------------
----------------- --------
---------- --------------------- -- ------ ---------
-
---------- --------------------- -
-- -
---------- ---------------
-
-总结
本文中，我们了解了 Material Design 中提供的 Loading 组件，并学习了如何自定义一个 Material Design 风格的 Loading 组件。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475b023968c7c53b02b2bb7