ProgressCircles 是经典的仪表板元素，可将统计数据直观地解释为摘要视图。 我们可以通过Java和Canvas进行渲染，然后配合CSS、图片或者借助SVG实现一个进度圈。
用SVG实现进度圈并没有想象中那么困难css3 进度圈，让我们从基础开始：
创建背景
首先，创建一个直径为90px的矩形，然后使用cx,cy设置SVG元素的中心位置。 我还在这里添加了一些样式属性，例如 3px 的白色轮廓。
添加进度条
现在我们需要在昨天的背景中添加另一个进度方块：
好了，现在我们已经画出了两个必要的圆圈。 可以想象，100%可以用一个全红色的方块来表示，而如果我想表示一个特定的比例怎么办？
笔画破折号数组和笔划破折号偏移
然后你需要编写CSS。 SVG提供了两个属性，Stroke-DashArray和Stroke-DashOffset，可以使昨天矩形的轮廓变成实线。 如果两个属性都设置为100px，会有以下效果：
#progress{笔画-dasharray:100px;笔画-dashoffset:100px;}
之后，我们可以使用@keyframe为其添加一些动画：
实现特定比例的表示
至此，动画效果、进度圈、背景圈就已经完成了。 最后的工作是用strike-dashoffset来表达给定的比例，这可能会涉及到物理的知识。
这里我们使用Sass来完成这个工作。 其实Java和CSSDOM结合起来也能达到我们想要的效果（可以处理浮点数）。
首先我们设置一些需要用到的变量css3 进度圈，$radius（圆的直径）、percent（要显示的比例）、$circumference（圆的边长）。
取出来，加上$circumference即可计算出strike-dashoffset的值。
如果你尝试运行这个反例，你会发现圆圈的进度条将从 3 点钟开始。 为了解决这个问题，我们需要将整个SVG逆时针旋转90°
结束
这里我补充了一些其他的疗效，这在一定程度上会涉及到一些物理知识。
如果有任何疑问，可以在文章下方留言。 另外，在上面的例子的基础上，使用了一些Java代码来处理进度条比例的效果。
本文是根据《》翻译而来，整个译文包含了我们自己的理解和思考。 如果翻译的不好或者有错误的地方，请各位同仁不吝赐教。 如果要转载此译文，必须注明中文来源：。
文章涉及图片和代码。 如果显示不完整给您带来不好的阅读体验，请点击文章顶部阅读全文。 如果您认为本站内容对您的工作或学习有帮助，请关注本公众号。
W3cplus.com
————————————
后端描述这些东西，推动web前沿
发表评论