如何仅使用CSS创建一个环形进度条？-51CTO.COM

这一系列课程将包含各种 ES6 辅助函数。它包括处理原语、数组和对象的助手，以及算法、DOM 操作函数和 Node.js 实用程序等相关内容。

环形进度条在现今的网站中是一个相当常见的元素。然而，对很多开发者来说，它们似乎是一个相当大的挑战。实际情况是，理解并掌握基础并不困难。事实上，借助一些新的CSS特性，这比以往任何时候都更容易。

环形进度条的结构

简单来说，一个环形进度条就是两个圆叠加在一起。下面的圆为背景，上面的圆为进度指示器。关于我们如何填充进度指示器的部分我们稍后再讲，但是基本的结构可以通过使用一个<svg>元素和少量的CSS轻松构建出来。

<svg width="250" height="250" viewBox="0 0 250 250">
  <circle class="bg"
    cx="125" cy="125" r="115" fill="none" stroke="#ddd" stroke-width="20"
  ></circle>
  <circle class="fg"
    cx="125" cy="125" r="115" fill="none" stroke="#5394fd" stroke-width="20"
  ></circle>
</svg>
circle.fg {
  transform: rotate(-90deg);
  transform-origin: 125px 125px;
}

正如你所看到的，我们需要的唯一一部分CSS就是一个变换属性。我们将前景圆旋转90度，并将变换原点设置为圆的中心。这样，圆就围绕其中心旋转，进度指示器从顶部开始。

数学计算

在我们开始之前，不妨花一点时间理解代码背后的数学原理。

我们需要确定的两个值是进度条的大小和描边的宽度。对于这个示例，我们确定了大小为250px，描边宽度为20px。我们将使用这些值来计算我们需要的其它值。

大小用来设置SVG元素的宽度和高度属性，以及viewBox属性。将其除以二，我们得到125px，对应于图片中心的坐标。这个值用来设置圆的cx和cy属性。

考虑到描边宽度，我们可以计算出圆的半径。半径是从圆心到边缘的距离。在这种情况下，半径是115px，即图片的大小减去描边宽度再除以二。

最后，我们可以计算出圆的周长。周长是圆边缘的长度。在这种情况下，周长是722.5px，即2 * π * 115px.。

变量	值	公式
size	`250px`	N/A (user defined)
stroke	`20px`	N/A (user defined)
center	`125px`	`size / 2`
radius	`115px`	`(size - stroke) / 2`
circumference	`722.5px`	`2 * π * radius`

接下来，这些数字将开始派上用场，但我保证我们几乎不需要做什么数学计算。

填充进度指示器

现在我们已经有了基本的结构，现在需要来填充进度指示器。为此，我们将使用 stroke-dasharray属性，它需要传入闪烁和长度的交替值。

要创建一个进度条，我们希望传入两个值：填充部分的长度和空白部分的长度。获取填充部分我们需要将进度百分比乘以圆的周长。获取空白部分，我们会从周长中减去填充部分。

假设我们想要填充圆的50%，SVG代码看起来将会是这样：

<svg width="250" height="250" viewBox="0 0 250 250">
  <circle class="bg"
    cx="125" cy="125" r="115" fill="none" stroke="#ddd" stroke-width="20"
  ></circle>
  <circle class="fg"
    cx="125" cy="125" r="115" fill="none" stroke="#5394fd" stroke-width="20"
    stroke-dasharray="361.25 361.25"
  ></circle>

使进度条动态化

硬编码stroke-dasharray值并不是很有用。我们希望能够动态地设置进度百分比。这就是之前的CSS变量和数学在这里起作用的地方。

给定一个--progress变量，我们可以相对容易地计算stroke-dasharray。知道我们将需要之前的大部分值，我们也可以将它们设置为CSS变量。更好的是，我们想要设置的大多数SVG属性都可以用CSS操作。

<svg
  width="250" height="250" viewBox="0 0 250 250"
  class="circular-progress" style="--progress: 50"
>
  <circle class="bg"></circle>
  <circle class="fg"></circle>
</svg>
.circular-progress {
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 20px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
}


.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}


.circular-progress circle.bg {
  stroke: #ddd;
}


.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #5394fd;
}

这可能看起来很多，但其实主要就是设置CSS变量，然后使用它们来计算我们需要的值。我想指出一个很酷的事情，那就是pi常数是calc()函数的一部分！

此时，如果你使用一些JavaScript去操作--progress变量的值，你会看到进度条填充起来。新增的transition属性将使进度条平滑地动画表现。

定时进度条

你是否曾在手机游戏里看过广告？你知道的，那种如果你看完整个广告就会给你奖励的那种。它们通常都有一个进度条，随着广告的播放而填充。或者说，当你观看时，它就像倒计时定时器一样慢慢变空。无论你可能看到的是哪种类型，它们都属于同一概念的变体。

我们如何创建一个在预定时间内填满的进度条呢？我们可以用JavaScript和Window.requestAnimationFrame()来实现，但那样就不太酷了。取而代之的是，我们可以使用animation属性来让--progress变量在设定的时间内从0变为100。

下面是重构后的代码看起来是什么样的：

@keyframes progress-animation {
  from {
    --progress: 0;
  }
  to {
    --progress: 100;
  }
}

如果你尝试将这个连接到我们的SVG，你会发现它并不像你想象的那样运作。这是因为浏览器并不知道如何处理--progress变量。它不知道它是一个数字，所以不知道如何对它进行动画处理。

幸运的是，CSS为此提供了一个解决方案。@property规则允许我们定义自定义属性，并告诉浏览器它们是什么类型。在这种情况下，我们想告诉浏览器--progress是一个数字。

@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

现在浏览器知道如何处理--progress变量，我们可以将它连接到动画。

.circular-progress {
  animation: progress-animation 5s linear 0s 1 forwards;
}

这将在5秒内把--progress变量从0变到100。forwards关键字告诉浏览器保持动画的最后值。没有它的话，动画完成后，进度条会重置为0。你可以通过设置animation-direction属性为reverse，并使用backwards而不是forwards来创建相反的效果。

整合所有内容

我们在这篇文章中涵盖了很多内容。我们从一个简单的SVG元素，发展到一个功能完整的进度条。我们使用了CSS变量、数学函数，甚至一个新的CSS特性。让我们来看看最终的代码。

<svg width="250" height="250" viewBox="0 0 250 250" class="circular-progress">
  <circle class="bg"></circle>
  <circle class="fg"></circle>
</svg>
.circular-progress {
  --size: 250px;
  --half-size: calc(var(--size) / 2);
  --stroke-width: 20px;
  --radius: calc((var(--size) - var(--stroke-width)) / 2);
  --circumference: calc(var(--radius) * pi * 2);
  --dash: calc((var(--progress) * var(--circumference)) / 100);
  animation: progress-animation 5s linear 0s 1 forwards;
}


.circular-progress circle {
  cx: var(--half-size);
  cy: var(--half-size);
  r: var(--radius);
  stroke-width: var(--stroke-width);
  fill: none;
  stroke-linecap: round;
}


.circular-progress circle.bg {
  stroke: #ddd;
}


.circular-progress circle.fg {
  transform: rotate(-90deg);
  transform-origin: var(--half-size) var(--half-size);
  stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
  transition: stroke-dasharray 0.3s linear 0s;
  stroke: #5394fd;
}


@property --progress {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}


@keyframes progress-animation {
  from {
    --progress: 0;
  }
  to {
    --progress: 100;
  }
}

以下是一个展示代码运行效果

图片

结论

使用现代HTML和CSS，我们创建了一个圆形进度条。这个设置可以作为你实验的好起点。你可以参照使用，也可以扩展它以适应你的需要，如果需要的话，你可以加入一点JavaScript。你甚至可以将它转换为Web组件或React组件用于你的项目。