css 圆形加载器

Question

我在整个网络上寻找一种创建简单的 css 圆形加载器的方法，但找不到任何简单的东西。 对于我正在构建的特殊网站，我需要一种以动态百分比显示调查结果的方法，以便我可以控制每个调查结果的百分比。

这是我找到的最接近的:
http://tympanus.net/Tutorials/CircularProgressButton/
BGut 我不需要任何动画。我只需要一个随调查不同而不同的形状，我将能够通过 css 轻松更改百分比
(例如 - 宽度:55%; 等等等等)

这是我正在使用的图形:

一切都需要尽可能简单，这样我也可以更改颜色。 任何人都知道如何做到这一点？

非常感谢

Answer 1

检查这个你可以使用 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>