Material Design 是一种现代化的设计语言，几乎可以应用于各种现代化的产品当中，包括网站和应用程序。其中，环状进度条是一种常见且有效的进度指示器，非常适用于各种复杂的 UI 设计。
本文将介绍如何通过 HTML、CSS 和 JavaScript 实现 Material Design 风格的环状进度条效果。
HTML 结构
首先，我们需要创建一个 HTML 元素来呈现环状进度条。通常，我们使用 <div> 元素或 SVG 元素来创建它。这里我们使用 <div> 元素。
<div class="progress"> <div class="progress__value"></div> </div>
注意，在 HTML 结构中，我们创建了一个带有类名 progress 的父元素，以及一个带有类名 progress__value 的子元素。父元素用于定义进度条的一般属性，而子元素用于定义进度条的当前值。
CSS 样式
接下来，我们需要为进度条添加 CSS 样式来定义它的外观。我们将使用 Sass 作为 CSS 预处理器，并在这里列出所有样式的代码。
-- -------------------- ---- -------
------------ ----
------------ --------
------------- --------
---------------- --------
--------- -
--------- ---------
------ -----
------- -----
----------------- -------------
-------------- -----
---------------- -
--------- ---------
---- ----
----- ----
------ -----
------- -----
----- ------- ------------ ------------ ---
---------- -------------- --------------- ------
-------------- -----
----------------- ------------
------- ----------- ----- ------------
----------------- ----------------
-
-下面是每个样式的作用说明：
$line-width定义进度条的宽度$line-color定义进度条的背景颜色$track-color定义进度条的轨道颜色$progress-color定义进度条的进度颜色
在进度条块 .progress 中，我们定义了以下样式：
position: relative定义进度条的位置width和height属性定义了进度条的大小，保证了它总是正方形background-color属性定义了进度条的轨道颜色border-radius属性定义了进度条的圆角
在进度条块 .progress__value 中，我们定义了以下样式：
position: absolute使进度条块可以使用top和left属性来居中clip属性用于定义进度条的形状，使其成为一个圆形transform属性定义了进度条块在中心显示的位置和旋转角度border-radius属性定义了进度条块的圆角background-color属性定义进度条块的颜色border属性定义了进度条块的线条背景色和宽度border-top-color属性定义了进度条块的进度颜色（即进度条中的部分）
JavaScript 代码
我们需要编写一些 JavaScript 代码来控制进度条的进度。在这里，我们使用简单的 JavaScript 代码。您可以将此代码与您的库之一（如 jQuery、Angular 或 React）混合使用也可以不使用，根据您的项目需要进行操作。以下是示例代码。
-- -------------------- ---- ------- -------- -------------------- - ----- ------ - ------------------------------------------- ----- ------ - ----------------------- ----- ------------- - - - ------- - ------- ----- ------ - ------------- - ------- - --- - -------------- ---------------------------- - ----------------- ------------------ ----------------------------- - ------- - ----------------
这个函数使用传递的参数百分比来更新当前进度，使进度条上进行相应的更改。该函数涉及以下主要思想：
- 计算进度条的圆弧的总面积
- 根据传递的百分比计算圆弧的偏移量
- 设置偏移量作为 CSS 样式属性的值，以更新环状进度条当前值
总结
本文介绍了如何使用 HTML、CSS 和 JavaScript 创建 Material Design 风格的环状进度条。通过这个例子，我们不仅可以看到如何应用这些设计原则，而且可以更好地了解前端开发中使用的各种技术。请开始尝试实现它自己的代码，如果您有任何疑问，请给我们留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645efc8e968c7c53b011c981