圆形进度条 CSS

Codepen演示 -

HTML -

CSS -

JavaScript -

大家好，在本教程中，我将向大家展示如何使用 HTML、CSS 和 JavaScript 创建一个圆形进度条。
我从以下视频中学习了这种方法：
https://youtu.be/SKU2gExpkPI

让我们开始吧……

Codepen演示 -

HTML -

<div class="circular-progress" data-inner-circle-color="lightgrey" data-percentage="80" data-progress-color="crimson" data-bg-color="black">
  <div class="inner-circle"></div>
  <p class="percentage">0%</p>
</div>

主 div 元素带有类名“circular-progress”，我们将使用该类名在 JavaScript 和 CSS 中访问进度条。主 div 元素内包含一个带有类名“inner-circle”的 div 元素，用于创建内圆。内圆比主 div 元素小，并且居中放置，这样只会显示外层 div 元素的一小部分，我们将利用这部分来创建进度条效果。
百分比级别将显示在类名为“percentage”的段落中。
共有 4 个 data-* 属性：data-inner-circle-color、data-percentage、data-progress-color 和 data-bg-color。“data-inner-circle-color”用于设置内圆的背景颜色，“data-percentage”用于设置百分比值（进度条最多达到的百分比），“data-progress-color”用于设置进度条的颜色，“data-bg-color”用于设置主进度条 div 的背景颜色。

CSS -

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --progress-bar-width: 200px;
  --progress-bar-height: 200px;
  --font-size: 2rem;
}

.circular-progress {
  width: var(--progress-bar-width);
  height: var(--progress-bar-height);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner-circle {
  position: absolute;
  width: calc(var(--progress-bar-width) - 30px);
  height: calc(var(--progress-bar-height) - 30px);
  border-radius: 50%;
  background-color: lightgrey;
}

.percentage {
  position: relative;
  font-size: var(--font-size);
  color: rgb(0, 0, 0, 0.8);
}

使用 CSS 样式使进度条看起来像圆形。
使用 CSS 变量和 calc() 函数，内圆的宽度和高度将始终比外圆小 30px。

JavaScript -

const circularProgress = document.querySelectorAll(".circular-progress");

Array.from(circularProgress).forEach((progressBar) => {
  const progressValue = progressBar.querySelector(".percentage");
  const innerCircle = progressBar.querySelector(".inner-circle");
  let startValue = 0,
    endValue = Number(progressBar.getAttribute("data-percentage")),
    speed = 50,
    progressColor = progressBar.getAttribute("data-progress-color");

  const progress = setInterval(() => {
    startValue++;
    progressValue.textContent = `${startValue}%`;
    progressValue.style.color = `${progressColor}`;

    innerCircle.style.backgroundColor = `${progressBar.getAttribute(
      "data-inner-circle-color"
    )}`;

    progressBar.style.background = `conic-gradient(${progressColor} ${
      startValue * 3.6
    }deg,${progressBar.getAttribute("data-bg-color")} 0deg)`;
    if (startValue === endValue) {
      clearInterval(progress);
    }
  }, speed);
});

使用“querySelectorAll”选择文档中的所有进度条，然后使用“forEach”为每个类名为“circular-progress”的元素提供进度条逻辑。
ProgressColor 用于确定进度条条带的颜色。StartValue 和 EndValue 分别是起始百分比和结束百分比。Speed 将用于在 setInterval 中设置延迟时间。
创建一个间隔“进度”，并使用“速度”变量来控制其延迟。
在每个时间间隔内，将 startValue 的值增加 1。
使用文本内容设置段落的百分比值，并使用内联样式方法设置颜色。
然后使用内联样式方法，通过“data-inner-circle-color”属性值设置内圆背景颜色。
圆锥渐变用于创建进度条效果。此渐变包含两种颜色：第一种是条带的颜色，其度数以起始值的 3.6 倍递增（例如，0 * 3.6、1 * 3.6、2 * 3.6、……、100 * 3.6）；第二种颜色用于圆的另一部分，或者说，用于圆条的剩余部分；其值为 0 度，并且始终覆盖圆条的剩余部分。
最后，在 if 语句中，如果 start 和 end 的值相等，则清除间隔并停止进度条。