如何仅使用CSS创建一个环形进度条？

这一系列课程将包含各种 ES6 辅助函数。它包括处理原语、数组和对象的助手，以及算法、DOM 操作函数和 Node.js 实用程序等相关内容。63m28资讯网——每日最新资讯28at.com

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

63m28资讯网——每日最新资讯28at.com

环形进度条的结构

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

<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;}

63m28资讯网——每日最新资讯28at.com

正如你所看到的，我们需要的唯一一部分CSS就是一个变换属性。我们将前景圆旋转90度，并将变换原点设置为圆的中心。这样，圆就围绕其中心旋转，进度指示器从顶部开始。63m28资讯网——每日最新资讯28at.com

数学计算

在我们开始之前，不妨花一点时间理解代码背后的数学原理。63m28资讯网——每日最新资讯28at.com

我们需要确定的两个值是进度条的大小和描边的宽度。对于这个示例，我们确定了大小为250px，描边宽度为20px。我们将使用这些值来计算我们需要的其它值。63m28资讯网——每日最新资讯28at.com

大小用来设置SVG元素的宽度和高度属性，以及viewBox属性。将其除以二，我们得到125px，对应于图片中心的坐标。这个值用来设置圆的cx和cy属性。63m28资讯网——每日最新资讯28at.com

考虑到描边宽度，我们可以计算出圆的半径。半径是从圆心到边缘的距离。在这种情况下，半径是115px，即图片的大小减去描边宽度再除以二。63m28资讯网——每日最新资讯28at.com

最后，我们可以计算出圆的周长。周长是圆边缘的长度。在这种情况下，周长是722.5px，即2 * π * 115px.。63m28资讯网——每日最新资讯28at.com

接下来，这些数字将开始派上用场，但我保证我们几乎不需要做什么数学计算。63m28资讯网——每日最新资讯28at.com

填充进度指示器

现在我们已经有了基本的结构，现在需要来填充进度指示器。为此，我们将使用 stroke-dasharray属性，它需要传入闪烁和长度的交替值。63m28资讯网——每日最新资讯28at.com

要创建一个进度条，我们希望传入两个值：填充部分的长度和空白部分的长度。获取填充部分我们需要将进度百分比乘以圆的周长。获取空白部分，我们会从周长中减去填充部分。63m28资讯网——每日最新资讯28at.com

假设我们想要填充圆的50%，SVG代码看起来将会是这样：63m28资讯网——每日最新资讯28at.com

<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变量和数学在这里起作用的地方。63m28资讯网——每日最新资讯28at.com

给定一个--progress变量，我们可以相对容易地计算stroke-dasharray。知道我们将需要之前的大部分值，我们也可以将它们设置为CSS变量。更好的是，我们想要设置的大多数SVG属性都可以用CSS操作。63m28资讯网——每日最新资讯28at.com

<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()函数的一部分！63m28资讯网——每日最新资讯28at.com

此时，如果你使用一些JavaScript去操作--progress变量的值，你会看到进度条填充起来。新增的transition属性将使进度条平滑地动画表现。63m28资讯网——每日最新资讯28at.com

定时进度条

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

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

下面是重构后的代码看起来是什么样的：63m28资讯网——每日最新资讯28at.com

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

63m28资讯网——每日最新资讯28at.com

如果你尝试将这个连接到我们的SVG，你会发现它并不像你想象的那样运作。这是因为浏览器并不知道如何处理--progress变量。它不知道它是一个数字，所以不知道如何对它进行动画处理。63m28资讯网——每日最新资讯28at.com

幸运的是，CSS为此提供了一个解决方案。@property规则允许我们定义自定义属性，并告诉浏览器它们是什么类型。在这种情况下，我们想告诉浏览器--progress是一个数字。63m28资讯网——每日最新资讯28at.com

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

63m28资讯网——每日最新资讯28at.com

现在浏览器知道如何处理--progress变量，我们可以将它连接到动画。63m28资讯网——每日最新资讯28at.com

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

63m28资讯网——每日最新资讯28at.com

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

整合所有内容

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

<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;  }}

以下是一个展示代码运行效果63m28资讯网——每日最新资讯28at.com

图片63m28资讯网——每日最新资讯28at.com

结论

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

本文链接：http://www.28at.com/showinfo-26-80884-0.html如何仅使用CSS创建一个环形进度条？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 代码是如何被被编译的？

下一篇： 巧妙运用Redisson打造自定义限流注解，让接口防刷更高效