创建自定义饼图样式圈

Question

我试图从一个圆圈中切出一块，但事实证明它比我原先预期的更难......

最好，我不想使用谷歌图表和任何其他等价物，因为我需要尽可能多地控制这个圆圈的样式（最终结果是加载环）。我还需要能够使用jQuery或CSS为切片的大小设置动画。

请原谅我，但我没有走得太远，这就是我的全部：

JSFiddle

我关注的圈子是#layer_2和#layer_3。以下是此圈子的代码：

#layer_2 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 14px;
  background: #5c00d2;
  background: -moz-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #5c00d2), color-stop(100%, #d586f4));
  background: -webkit-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -o-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: -ms-linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  background: linear-gradient(45deg, #5c00d2 0%, #d586f4 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5c00d2', endColorstr='#d586f4', GradientType=1);
  -webkit-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  -moz-box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
  box-shadow: inset 0px 0px 5px 3px rgba(5, 71, 110, 0.5);
}
#layer_3 {
  border-radius: 50%;
  width: 212px;
  height: 212px;
  margin: 0;
  background: transparent;
  -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
}

<div id="layer_2">
  <div id="layer_3"></div>
</div>

我希望最终结果与此类似：

Answer 1

您好我认为这可以帮助您找出问题，但我不知道如何调整渐变请参阅链接 https://jsfiddle.net/w0yu95u3/3/ 更改两个wedge含义.container1 .wedge和.container2 .wedge以更改transform: rotateZ(N)，但请记住，您必须将两个部分组合在圆圈侧。检查一下。

这是主要的资源 https://cssanimation.rocks/watch/

Answer 2

试试这个

  

layer_2

background-image:
    linear-gradient(-90deg, transparent 50%, #5c00d2 50%),
    linear-gradient(200deg, #5c00d2 50%, transparent 50%);

DEMO