这一系列课程将包含各种 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 |
| N/A (user defined) |
stroke |
| N/A (user defined) |
center |
|
|
radius |
|
|
circumference |
|
|
接下来，这些数字将开始派上用场，但我保证我们几乎不需要做什么数学计算。
现在我们已经有了基本的结构，现在需要来填充进度指示器。为此，我们将使用 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组件用于你的项目。
本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-80884-0.html如何仅使用CSS创建一个环形进度条？
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
上一篇： 代码是如何被被编译的？
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
