简介
圆形/径向进度条是一种常见的 UI 元素，它可以显示任务或操作的进度。在前端开发中，我们可以使用 CSS 和 JavaScript 创建这种效果。
实现
HTML
首先，我们需要一个 HTML 元素来容纳进度条。可以使用一个 div 元素，并添加一个带有自定义类名的子元素，用于表示当前进度。
<div class="progress-bar"> <div class="progress"></div> </div>
CSS
接下来，我们使用 CSS 来设置元素的样式。对于圆形/径向进度条，我们可以使用 border-radius 属性将元素变为圆形，然后使用 background-image 属性和渐变函数（linear-gradient() 或 radial-gradient()）来创建颜色渐变。最后，我们使用 transform: rotate() 属性来旋转进度条。
-- -------------------- ---- ------- ------------- - ------ ------ ------- ------ -------------- ---- ----------------- -------- -- ----- -- - --------- - --------- --------- ------ ----- ------- ----- -------------- ---- ----------------- ---------------------- -- ------- ------- --- ------- ------ -- ------- -- ----------------- ------- ---------- -------------- -
JavaScript
最后，我们使用 JavaScript 来更新进度条的值。可以通过改变 progress 元素的高度来实现。
const progressBar = document.querySelector('.progress-bar');
const progress = document.querySelector('.progress');
function setProgress(percent) {
progress.style.height = percent + '%';
}
setProgress(50); // 设置进度条为 50%示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------- -------- -----------
-------
------------- -
------ ------
------- ------
-------------- ----
----------------- --------
--------- ---------
-
--------- -
--------- ---------
------ -----
------- --
-------------- ----
----------------- ---------------------- -- ------- ------- --- ------- ------
----------------- -------
---------- --------------
----------- ------ ---- ---------
-
--------
-------
------
---- ---------------------
---- -----------------------
------
--------
----- ----------- - ----------------------------------------
----- -------- - ------------------------------------
-------- -------------------- -
--------------------- - ------- - ----
-
----------------
---------
-------
-------总结
圆形/径向进度条是一种常见的 UI 元素，它可以显示任务或操作的进度。我们可以使用 CSS 和 JavaScript 创建这种效果。在 CSS 中，我们使用 border-radius 属性将元素变为圆形，然后使用 background-image 属性和渐变函数（linear-gradient() 或 radial-gradient()）来创建颜色渐变。最后，我们使用 transform: rotate() 属性来旋转进度条。在 JavaScript 中，我们可以通过改变进度条高度来更新进度条的值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30292