css3 - CSS圆形加载器

我一直在网上寻找一种创建简单的CSS圆形加载器的方法，但是没有简单的方法。
对于我正在构建的特殊网站，我需要一种以百分比形式显示调查结果的方法，该百分比将是动态的，因此我可以控制每个调查结果的百分比。

这是我找到的最接近的一个：
http://tympanus.net/Tutorials/CircularProgressButton/
BGut我不需要任何动画。我只需要一个形状，该形状会因调查而异，并且我将能够通过CSS轻松更改性能
（例如-宽度：55％；等等）。

这是我正在使用的图形：


一切都需要尽可能简单，以便我也可以更改颜色。
任何人都知道如何实现这一目标吗？

非常感谢

最佳答案

选中此选项可以使用svg，它可以在strokeoffset上使用。只需单击中心并输入一个值

$('input').keyup(function(){
    var val=$(this).val()
    val=parseInt(val);
    $('.path').css('stroke-dashoffset',(val*-315/100))
})

.path {
    fill:none;
    stroke-dasharray: 800;
    stroke-dashoffset: 0;
    transition:.5s all;
}


input{
    width:50px;
    height:50px;
    border-radius:50%;
    position:absolute;
    margin-left:170px;
    margin-top:70px;
    font-size:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" maxlength="3"/>
<svg width="1100" height="800">
  <circle cx="200" cy="100" r="50" stroke-width="50" stroke="cornflowerblue" fill="none"/>
    <circle cx="200" cy="100" r="50" stroke-width="50" stroke="black" class="path"/>
</svg>

关于css3 - CSS圆形加载器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28397911/