在现代 Web 开发中，Material Design 已经成为一种非常流行的设计风格，特别是在移动端应用和响应式网站中。不令人惊讶的是，越来越多的网站开始体验 Material Design 的视觉语言和交互效果。其中，循环进度条是 Material Design 风格中非常受欢迎的一个。
循环进度条不仅美观，而且功能性强大。它可以用来表示长时间加载、处理和请求数据的过程，让用户感觉到你的网站正在积极工作。在本文中，我们将详细探讨实现 Material Design 风格下的循环进度条的方法，包括 HTML、CSS 和 JavaScript。
HTML 结构
在 HTML 中，我们将使用一个简单的 div 元素来作为进度条的容器。在此基础上，我们将添加一些额外的 div 元素来表示循环进度条的每个分段。
<div class="md-progress-container">
<div class="md-progress-circle1 md-progress-circle"></div>
<div class="md-progress-circle2 md-progress-circle"></div>
<div class="md-progress-circle3 md-progress-circle"></div>
<div class="md-progress-circle4 md-progress-circle"></div>
</div>如上所示，我们首先创建一个名为 md-progress-container 的 div 元素，它将承载循环进度条。接下来，我们创建四个 div 元素，分别代表四段循环进度条，它们分别拥有一个名为 md-progress-circle 的 CSS 类和一个独特的 md-progress-circleX 类（X 代表 1 到 4 的数字），其中 X 表示当前循环进度条的第几段。
CSS 样式
在 CSS 中，我们将利用伪类 :before 和 :after 来创建圆形，同时使用 animations 和 keyframes 来指定循环进度条的运动路径。我们还将使用变量 --md-progress-size 来指定循环进度条的大小，这将使我们更容易控制循环进度条的大小。下面是 CSS 代码：
-- -------------------- ---- -------
---------------------- -
------- ----------------------- ------
------ ----------------------- ------
--------- ---------
-------- -----
---------------- -------
------------ -------
-
------------------- -
-------------- ----
--------- ---------
-------- ---
------- -----
------ -----
----------- -----------
------- --- ----- ------------
-
---------------------------- -------------------------- -
---- --
----- --
-
---------------------------- -------------------------- -
---- --
------ --
-
---------------------------- -------------------------- -
------- --
------ --
-
---------------------------- -------------------------- -
------- --
----- --
-
--------------------------- ------------------------- -
--------- ---------
-------- ---
-------------- ----
----------- -----------
------- --- ----- ------------
---------- ----------- -- ----------------- -- ---- -- ---------
-
-------------------------- -
----------------- --------
------------------- --------
-
------------------------- -
-------------------- --------
------------------ --------
-
---------- ----------- -
-- -
---------- ----------
------------- ----
-------- --
-
--- -
---------- ---------------
------------- ----
-------- ----
-
---- -
---------- ---------------
------------- ----
-------- --
-
-如上所示，我们首先定义了 .md-progress-container 类，指定了容器的高度、宽度、位置和弹性盒子布局。接下来，我们定义 .md-progress-circle 类，指定了每个分段循环进度条的公共属性。我们还为每个分段循环进度条指定了用于伪类 :before 和 :after 的唯一 CSS 类，并使用位置和样式属性将它们移动到相应的位置。接下来，我们指定了伪类 :before 和 :after 的形状和样式，包括使用颜色变量为悬停分配颜色，使用动画名称为每个循环进度条指定动画，并使用 animation 属性指定动画的持续时间、缓动函数和循环方式。
我们还为动画定义了 @keyframes 属性，指定了在不同时间段内循环进度条的运动路径、边框宽度和不透明度。通过这个关键帧，我们已经确定了循环进度条的运动路径，即通过不断旋转 360 度，使图案连续不断地从上一个状态向下一个状态转换。
JavaScript 代码
在 JavaScript 中，我们将创建一个名为 mdProgress 的对象，用于控制循环进度条的属性，包括容器大小、循环速度等。我们还将为每个分段循环进度条添加动画类名，并使用 setTimeout 函数递归调用 setAnimation 方法，以更改循环进度条的动画。
-- -------------------- ---- -------
----- ---------- - -
----- -------
------ --
----- -----
----- ---------- -
----- ----------------- - -------------------------------------------------
--------------------------------------------------------- -----------
--------------------------------------------------------------- -- -
---------------------------------
---
--------------------
--
------------- ---------- -
--- - - --
----------------------------------------------------- -- -
--------------------------- - --- - ----- - ----------- - -- - ----
---
-- ----------- -
------------- -- -
--------------------
-- ---------- - ------
-
-
--
------------------如上述代码所示，我们首先定义了一个 mdProgress 的对象，包含 size、speed 和 loop 等属性。我们还定义了 init() 方法，它将使用 querySelector() 方法和容器的大小大小属性 --md-progress-size 来获取和设置容器的尺寸，并使用 classList.add() 方法向每个循环进度条添加一个 animated CSS 类，该类将调用动画。
接下来，我们定义 setAnimation() 方法，它使用 querySelectorAll() 方法和 forEach() 循环为每个动画圆圈计算动画延迟并将其分配给 animation-delay CSS 属性。在分配完所有动画延迟之后，我们使用递归调用 setTimeout() 方法，每个动画延迟结束后，来更新一次 setAnimation() 方法，从而实现循环进度条的动画效果。
示例代码
最后，以下是完整的示例代码，包括 HTML、CSS 和 JavaScript：
-- -------------------- ---- -------
---- ------------------------------
---- -------------------------- --------------------------
---- -------------------------- --------------------------
---- -------------------------- --------------------------
---- -------------------------- --------------------------
------
-------
---------------------- -
------- ----------------------- ------
------ ----------------------- ------
--------- ---------
-------- -----
---------------- -------
------------ -------
-
------------------- -
-------------- ----
--------- ---------
-------- ---
------- -----
------ -----
----------- -----------
------- --- ----- ------------
-
---------------------------- -------------------------- -
---- --
----- --
-
---------------------------- -------------------------- -
---- --
------ --
-
---------------------------- -------------------------- -
------- --
------ --
-
---------------------------- -------------------------- -
------- --
----- --
-
--------------------------- ------------------------- -
--------- ---------
-------- ---
-------------- ----
----------- -----------
------- --- ----- ------------
---------- ----------- -- ----------------- -- ---- -- ---------
-
-------------------------- -
----------------- --------
------------------- --------
-
------------------------- -
-------------------- --------
------------------ --------
-
---------- ----------- -
-- -
---------- ----------
------------- ----
-------- --
-
--- -
---------- ---------------
------------- ----
-------- ----
-
---- -
---------- ---------------
------------- ----
-------- --
-
-
--------
--------
----- ---------- - -
----- -------
------ --
----- -----
----- ---------- -
----- ----------------- - -------------------------------------------------
--------------------------------------------------------- -----------
--------------------------------------------------------------- -- -
---------------------------------
---
--------------------
--
------------- ---------- -
--- - - --
----------------------------------------------------- -- -
--------------------------- - --- - ----- - ----------- - -- - ----
---
-- ----------- -
------------- -- -
--------------------
-- ---------- - ------
-
-
--
------------------
---------总结
在本文中，我们详细探讨了实现 Material Design 风格的循环进度条的方法，并包含了示例代码。通过这篇文章，读者可以学习如何通过使用 HTML、CSS 和 JavaScript 来创建现代的、功能性强大的循环进度条。最终，读者将拥有必要的技能和知识，在开发现代 Web 应用程序时应用 Material Design 风格的循环进度条，并提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649856c348841e98945608e0