在css圈中显示数据库内容 - 无响应

Question

我正在尝试创建无响应的进度圈来显示数据库内容（如果这有意义吗？）。

例如，我希望它看起来像

我希望它显示数据库中的内容，例如@test.correct_answers_count或@test.percentage

Answer 1

SVG是处理循环元素的好方法。很难使用CSS来获得四舍五入的边框，它有一个开始和结束，你可以准确控制。

这是一个几乎是圆形的SVG路径，但顶点（12点钟位置）没有连接起来：

<svg class='version-1' x="0px" y="0px"
     width="142.924px" height="142.924px" viewBox="0 0 142.924 142.924">
<path fill="none" stroke="#000000" stroke-width="8" stroke-miterlimit="10" d="M71.462,13.129
    c32.217,0,58.334,26.116,58.334,58.333s-26.117,58.334-58.334,58.334s-58.333-26.117-58.333-58.334S39.245,13.129,71.462,13.129"/>
</svg>

所以，如果你现在想要使用CSS我们可以做的就是破折号这一行。我们将从头开始创建一个破折号，其长度如下：

svg path{
  stroke-dasharray: 364px 0;
  stroke-dashoffset: 0%;
  stroke: red;
}

这给了它一条完整的道路。为什么364px？因为pi x直径（118px）是圆的周长。第一个数字（364）是短划线长度，第二个数字是间隙 - 两者一起应该是364或任何直径的圆圈。

从这里开始，你可以做一些很直接的事情。

100% = 364px;
60% = 364 / 100 * 60 = 218.4px;
10% = 364 / 100 * 10 = 36.4px;

让我们来看看这些是如何运作的！

http://codepen.io/EightArmsHQ/pen/GgzRXa/

修改

所有这些都表明它可能更容易使用评论中提到的jQuery插件 - 有时候创建自己的东西和时间只是使用其他人已经去创作的艰苦工作。