Javascript 简单甜甜圈图

我需要建立一个非常简单的圆环图（2个值，没有动画，纯css） 在google中没有发现任何简单的东西（所有东西都使用动画或许多值）

---

请帮助我：）

我不确定您是否可以使用纯CSS制作一个，但请检查。他们的方法非常简单，您只需使用两个值即可（不要被示例吓倒）。

CSS

使它起作用的技巧也是它的

限制

。。。。使用

线性渐变

从

0%到50%显示#3498db颜色，然后从50%到100%显示#FFFFFF

颜色。。。要以完美的外观动态设置此选项将非常困难

---

希望对你有帮助

我需要这个洞对背景是透明的，用这些例子是不可能的。。像这样的？你将不得不玩旋转和顶部位置，以获得理想的效果。。。p、 以下是一些获得不同形状的有用想法：

.value {
    height:100%;
    width:100%;
    border-radius:100%;
    box-shadow: 0 0 0 2px #FFFFFF, 0 0 5px rgba(0, 0, 0, 0.1) inset;
    position:absolute;
    background: -moz-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3498db), color-stop(50%, #3498db), color-stop(50%, #FFFFFF), color-stop(100%, #FFFFFF));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* Opera11.10+ */
    background: -ms-linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* IE10+ */
    background: linear-gradient(top, #3498db 0%, #3498db 50%, #FFFFFF 50%, #FFFFFF 100%);/* W3C */
}