阴阳像css一样空中心

Question

我在这里有这个装载机：https://jsfiddle.net/guanzo/hdn3wqmd/2/

我试图让它看起来像这样

我不确定这可以单独使用边框，我尝试过一系列边框宽度/半径等变化，但它永远不会出现。

.loader {
    border-top: 40px solid #3498db; /* Blue */
    border-bottom: 40px solid darkblue; /* Blue */
    border-radius: 50%;
    width: 300px;
    height: 300px;
}

编辑：我不是要求让它旋转。我正在询问如何使用css创建上面提供的图像。你会注意到阴阳的形状填充了一个圆圈。我想要的形状没有，并且有一个空的中心。

Answer 1

没关系..

* {
  box-sizing:border-box;

}
div{
  
display:inline-block;
}
.loader {
    border-top: 40px solid #3498db; /* Blue */
    border-bottom: 40px solid darkblue; /* Blue */
     border-radius:75% 25% 75%;
     width: 200px;
     height: 200px;
     transform: rotate(35deg);
     margin-left:25%;
}

<div class="wrap">
<div class="loader"></div>
</div>

或者你可以在这里尝试更多的调整