css 圆形形状加载器答案

【问题标题】：css circle shape loadercss 圆形形状加载器
【发布时间】：2015-04-19 23:08:25
【问题描述】：

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

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

这是我正在使用的图形：

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

非常感谢

【问题讨论】：

也许您可以阅读教程并尝试构建它，或者下载源代码。 tympanus.net/codrops/2014/04/09/…
是的，我把链接放在上面。我正在寻找类似但没有动画的更简单的东西。谢谢@Tony Barnes

标签： css animation shape css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：