css圆形装载机

Question

我正在网上寻找一种创建简单的css圆形装载机的方法，并且不会有任何简单的东西。 对于我正在建设的特殊网站，我需要一种以百分比显示调查结果的方式，这将是动态的，因此我可以控制每个调查结果的百分比。

这是我找到的最接近的一个：
http://tympanus.net/Tutorials/CircularProgressButton/
我不需要任何动画。我只需要一个从测量到测量不同的形状，我将能够通过css轻松改变percantages （例如 - 宽度：55％; 等等。）

这是我正在使用的图形：

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

非常感谢

Answer 1

选中此项，您可以使用svg strokeoffset。只需单击中心并键入值

即可

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

即使您在CSS中要求使用此解决方案，您仍然可以使用jQuery Knob框架：http://anthonyterrien.com/knob/，它非常易于使用并且可以解决您的问题。