1
我已经看到了很多创建圆形进度条的解决方案。它们似乎都非常漫长和复杂。我想创建一个非常简单的一个,只需在彼此顶部绘制两个圆圈并剪切一部分外部圆圈,以创建一个小于100%的进度条外观。剪辑路径,如何创建一个圆形进度条?
我的HTML
<div class="outter">
<div class="inner"></div>
</div>
我的CSS
.outter {
background-color: #08a1db;
width: 100px;
height: 100px;
border-radius: 50%;
position: relative;
}
.inner {
background-color: white;
width: 84px;
height: 84px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -42px 0 0 -42px;
}
现在我有使用夹路径故障的部分。我无法从文档中找出如何剪切外部圆圈并创建进度条的效果。有什么建议么?
如何将你所代表的旋转程度,如果我们正在寻找过去的50%的进度? –
需要使用另一半圈。并画。编辑所有deg。 – Hash
我明白了。我想我可以自己创造它。感谢您的帮助哈希。 –